Postingan lainnya
Menjumlahkan otomatis pada array dengan javascript
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>
3 Jawaban:
jangan pakai id, kalau lebih dari satu element gunakan class, jadi nanti cara mengakses nya juga dilloop namakelas[$i] satu per satu di javascript
Tanggapan
saya masih kurang mengerti kak, boleh kasih contoh class di sebelah mana?
class menggantikan id, attribute HTML
saya sudah coba, hanya saja masih kebingungan di cara penggunaan looping di html nya kenapa masih tidak mau ya? berikut code nya
<pre> <!DOCTYPE html> <html> <head> <title>Uji Coba</title> </head> <body>
<form method="GET"> <?php for ($i=1; $i <=3 ; $i++) { ?>
Nilai Ke &lt;?php echo $i; ?&gt;
&lt;input type="text" id="p[]" class="items" name="qty" value="0" onkeyup="getItems()"&gt;
&lt;br&gt;&lt;br&gt;
&lt;?php
}
?&gt;
<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> </pre>
Tanggapan
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
Jawaban Terpilih
Terimakasih sudah mau membantu kang @hilmanrdn , saya sudah menemukan solusinya . codenya dibawah ini.
<pre> <!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> </pre>
Tanggapan
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..
baik kak terimakasih
gabisa liat fullcode ya ini? kaya ke encrypt gitu