Daftar dan Belajar Sekarang!

Menjumlahkan otomatis pada array dengan javascript

foto quindeir
6 Kontribusi 1 Coto
1 minggu yang lalu
Saya ingin menjumlahkan beberapa nilai yang dilooping contohnya Nilai 1 : 3 Nilai 2 : 10 Nilai 3 : 12 Jumlah : 25 dan jumlah itu keluar secara otomatis ketika nilai 1, 2 , dan 3 diinput atau bahkan jika hanya salah satu yang diinput maka jumlah nya akan keluar otomatis tanpa menggunakan tombol. saya sudah mencobanya dengan code dibawah ini, tapi hasilnya yang keluar adalah nilai yang dijumlahkan bukan keseluruhan melainkan beberapa index yang ada pada salah satu kolom nilai. mohon pencerahannya, berikut code nya.
<!DOCTYPE html>
<html>
<head>
<title>Uji Coba</title>
</head>
<body>
<form method="GET">
<?php 
for ($i=1; $i <=3 ; $i++) { 
?>

Nilai Ke <?php echo $i; ?>
<input type="text" id="qty" name="qty" onkeyup="sum()">
<br><br>
<?php
}
?>
Jumlah
<input type="text" name="jumlah" id="jumlah" placeholder="Jumlah">

</form>
<script>
function sum(id) {
var qty = document.getElementById('qty').value;
var result = 0;
for (var i = 0; i < 3 ; i++) {
result += parseFloat(qty[i]);
}

if (!isNaN(result)) {
document.getElementById('jumlah').value = result.toFixed(0);
}if (isNaN(result)) {
document.getElementById('jumlah').value = "";
}
}
</script>
</body>
</html>

Tag: php mysql javascript

✔ Forum ini sudah terjawab


Jawaban
foto quindeir
6 Kontribusi 1 Coto
1 minggu yang lalu
Terimakasih sudah mau membantu kang @hilmanrdn , saya sudah menemukan solusinya . codenya dibawah ini.
<!DOCTYPE html>
<html>
<head>
	<title>Uji Coba</title>
</head>
<body>
<form method="POST">
	<?php 
	include("../config/koneksi.php");
	for($i = 1; $i <= 3; $i++){
			?>
		Nilai Ke <?php echo $i; ?>
		<input type="text" id="p<?php echo $i ?>" class="form-control" name="qty" value="0" onkeyup="getItems()">
		<br><br>
			<?php
		}
	 ?>
Total dari ke <?php echo $i-1 ; ?> Nilai 
<input type='text' id='tot' value='' />​
</form>	

<script type="text/javascript">
	function getItems()
{
 var items = new Array();
 var itemCount = document.getElementsByClassName("form-control");
 var total = 0;
 var id= "";
 for(var i = 0; i < itemCount.length; i++)
 {
   id = "p"+(i+1);
   total = total +  parseInt(document.getElementById(id).value);
 }
 if (!isNaN(total)) {	
	document.getElementById('tot').value = total;
	return total;
}if (isNaN(total)) {
	document.getElementById('tot').value = "";
}
}
getItems();
</script>
</body>
</html>
answered icon
foto hilmanrdn
2000 Kontribusi 1542 Coto
1 minggu yang lalu
jangan pakai id, kalau lebih dari satu element gunakan class, jadi nanti cara mengakses nya juga dilloop namakelas[$i] satu per satu di javascript
  • saya masih kurang mengerti kak, boleh kasih contoh class di sebelah mana? - quindeir
  • class menggantikan id, attribute HTML - hilmanrdn

foto quindeir
6 Kontribusi 1 Coto
1 minggu yang lalu
saya sudah coba, hanya saja masih kebingungan di cara penggunaan looping di html nya kenapa masih tidak mau ya? berikut code nya
<!DOCTYPE html>
<html>
<head>
	<title>Uji Coba</title>
</head>
<body>

<form method="GET">
	<?php 
		for ($i=1; $i <=3 ; $i++) { 
			?>

	 	Nilai Ke <?php echo $i; ?>
		<input type="text" id="p[]" class="items" name="qty" value="0" onkeyup="getItems()">
		<br><br>
			<?php
		}
	 ?>

<input type='text' id='tot' value='' />​
</form>	

<script type="text/javascript">
	function getItems()
{
 var items = new Array();
 var itemCount = document.getElementsByClassName("items");
 var total = 0;
 var id= document.getElementById("p");
 for(var i = 0; i < itemCount.length; i++)
 {
   //id = "p"+(i+1);
   total = total + parseInt(document.getElementById(id[i+1]).value);
 }
 if (!isNaN(total)) {	
	document.getElementById('tot').value = total;
	return total;
}if (isNaN(total)) {
	document.getElementById('tot').value = "";
}
}
getItems();
</script>
</body>
</html>
  • cara mengambil nilai di javascript dengan class itemCount document.getElementsByClassName("items")[0]; //nanti loop natik jadi [1] [2] dst. kamu bisa belajar javascript termasuk DOM dan contoh penggunannya disini https://sekolahkoding.com/track/belajar-javascript - hilmanrdn

foto quindeir
6 Kontribusi 1 Coto
1 minggu yang lalu
Terimakasih sudah mau membantu kang @hilmanrdn , saya sudah menemukan solusinya . codenya dibawah ini.
<!DOCTYPE html>
<html>
<head>
	<title>Uji Coba</title>
</head>
<body>
<form method="POST">
	<?php 
	include("../config/koneksi.php");
	for($i = 1; $i <= 3; $i++){
			?>
		Nilai Ke <?php echo $i; ?>
		<input type="text" id="p<?php echo $i ?>" class="form-control" name="qty" value="0" onkeyup="getItems()">
		<br><br>
			<?php
		}
	 ?>
Total dari ke <?php echo $i-1 ; ?> Nilai 
<input type='text' id='tot' value='' />​
</form>	

<script type="text/javascript">
	function getItems()
{
 var items = new Array();
 var itemCount = document.getElementsByClassName("form-control");
 var total = 0;
 var id= "";
 for(var i = 0; i < itemCount.length; i++)
 {
   id = "p"+(i+1);
   total = total +  parseInt(document.getElementById(id).value);
 }
 if (!isNaN(total)) {	
	document.getElementById('tot').value = total;
	return total;
}if (isNaN(total)) {
	document.getElementById('tot').value = "";
}
}
getItems();
</script>
</body>
</html>
  • siap silahkan ditandai sebagai jawaban yang benar. Kamu bisa bikin lebih simple dengan menggunakan class dan array seperti catatan saya di atas. jadi ngeloopnya nanti index classnya aja, namaClass[0] namaClass[1] dst.. - hilmanrdn
  • baik kak terimakasih - quindeir


Login untuk diksusi di forum sekolah koding