Cara Mudah Membuat Penjumlahan Text Otomatis Dengan HTML

3/12/2017
Cara Mudah Membuat Penjumlahan Text Otomatis Dengan HTML PHP

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
form anda. berikut source code javascript yang di tuliskan. Javascriptlah yang akan mengeksekusi perhitungan secara langsung pada form tersebut.

<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>

Kamu bisa paste code di atas secara lengkap, dan simpan dengan nama autosum.html, dan kamu bisa langsung mengeksekusi di browser kesayangan kamu.

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.

Artikel Terkait

Previous
Next Post »

4 komentar

Write komentar
Anonymous
AUTHOR
July 28, 2017 at 1:49 PM delete

Halo, bagaimana dengan penjumlahan format ribuan?

Reply
avatar
Unknown
AUTHOR
January 13, 2018 at 10:47 AM delete

Terimakasih untuk artikelnya sangat bermanfaat..

My blog

Reply
avatar
Ahmad
AUTHOR
June 24, 2018 at 8:55 AM delete

gan, mau nanya... saya sudah nyoba tutornya.. memang berhasil jika dibuat form perhitungan seperti contoh di atas, namun kendalanya apabila formnya misalkan dibuat rame, contohnya : terdiri dari Nama, Jabatan, Jam Kerja, nah misalkan saya mau hitung Jam Kerjanya dengan cara sperti di atas kok gk fungsi yah...

Reply
avatar
Anonymous
AUTHOR
March 23, 2022 at 6:13 PM delete

Cara Mudah Membuat Penjumlahan Text Otomatis Dengan Html - Sandi Fadilah >>>>> Download Now

>>>>> Download Full

Cara Mudah Membuat Penjumlahan Text Otomatis Dengan Html - Sandi Fadilah >>>>> Download LINK

>>>>> Download Now

Cara Mudah Membuat Penjumlahan Text Otomatis Dengan Html - Sandi Fadilah >>>>> Download Full

>>>>> Download LINK

Reply
avatar

Komentar untuk bertanya, memberikan masukan, atau saran. saya akan memalas pesan anda segera EmoticonEmoticon