Halo sahabat, apa kabar anda semua ? semoga sehat selalu dan sukses menjalankan aktifitas ya... amin, kali ini saya akan berbagi cara mudah membuat penjumlahan otomatis pada text html dengan bantuan javascript. cara ini sangat sering di gunakan pada sebuah form.
Perhitungna otomatis pada text bisanya di terapkan pada form dimana terdapat text field yang ingin kita jumlahkan secara langsung tanpa proses yang lain. nah kamu bisa menggunakan cara mudah di bawah ini.
Langkah ke1 - Membuat Penjumlahan Otomatis
- Memberikan nama pada form yang akan di eksekusi
- Memilih text field yang akan di gunakan sebagai perhitungan
- Menambahkan text sebagai hasil dari perhitungan.
Baik langsung saja kecontoh pembuatannya. Buatlah form dengan code seperti dibawah ini,
<h1>Auto SUM</h1>
<form name="autoSumForm" action="">
Nilai Pertama :<br>
<input type="text" name="hilai1" onFocus="startCalc();">
<br>
Nilai ke dua:<br>
<input type="text" name="nilai2" onFocus="startCalc();"" onBlur="stopCalc();" >
<br><br>
Hasil :<br>
<input type="text" name="hasil" onchange="tryNumberFormat(this.form.thirdBox);">
<br>
</form>Penjelasan :
Form di atas diberi nama dengan autoSumForm, selanjutnya nilai1 dan nilai2 sebagaai text target perhitungan di mulai, sedangkan hasil adalah penampung nilai akhir hasl perhitungan.
Langkah ke2 - Membuat Penjumlahan Otomatis
Tambahkan Javascript diatas file<script>
function startCalc(){
interval = setInterval("calc()",1);}
function calc(){
y = document.autoSumForm.nilai1.value;
z = document.autoSumForm.nilai2.value;
document.autoSumForm.hasil.value = ( y * z );}
function stopCalc(){
clearInterval(interval);}
</script>Penjelasan :
Terdapat function startCalc sebagai fungsi untuk memulainya perhitungan otomatis, nilai x dan z adalah variabel untuk menyimpan nilai pada nilai1 dan nilai2, sedangkan halsil sebagai pengeksekusi perhungan pada form tersebut.
Jika kamu ingin merubah pehitungannya kamu tinggal mengganti operator sesuai kebutuhan. berikut daftarnya :
- * Perkalian
- - Pengurangna
- / Pembagian dan
- + Untuk Penjumlahan
Coba saja kamu ganti operator diatas, pasti akan berubah perhitungannya. jika kamu belum memahaminya kamu bisa ajukan pertanyaan di kolom komentar dibawah ini. Berikut ini hasil akhir dari source code yang di buat.
<!DOCTYPE html>
<html>
<title>Autosum</title>
<body>
<h1>Auto SUM</h1>
<form name="autoSumForm" action="">
Nilai Pertama :<br>
<input type="text" name="nilai1" onFocus="startCalc();">
<br>
Nilai ke dua:<br>
<input type="text" name="nilai2" onFocus="startCalc();"" onBlur="stopCalc();" >
<br><br>
Hasil :<br>
<input type="text" name="hasil" onchange="tryNumberFormat(this.form.thirdBox);">
<br>
</form>
<script>
function startCalc(){
interval = setInterval("calc()",1);}
function calc(){
y = document.autoSumForm.nilai1.value;
z = document.autoSumForm.nilai2.value;
document.autoSumForm.hasil.value = ( y * z );}
function stopCalc(){
clearInterval(interval);}
</script>
</body>
</html>Cara membuat perhitungan di bulatakan
Sebagai tambahan pengetahuan jika kamu ingin membuat perhitungan yang di bulatkan secara otomatis, kamu bisa menambahakan code Math.round. hal ini memungkinkan kamu menapatkan hasil penjumlahan yang di bulatkan keatas.Berikut bentuk hasil dari code penambahannya.
document.autoSumForm.hasil.value = Math.round( y * z );}Demikian tutorial Cara Mudah Membuat Penjumlahan Text Otomatis, jangan lupa bagian cara ini keteman-teman yang belum mengetahuinya. biasakan tinggalkan jejak di kolom komentar untuk berdiskusi dengan teman yang lain. Oke, Happy Code.
