Terjadi error saat menjumlahkan antara 2 variabel dari html dengan 1 variabel dari javascript

Saat saya submit setelah angka total gaya dan tinggi diinput tidak terjadi penjumlahan yang seharusnya muncul di label hasil

<label for="Total Gaya">Total Gaya:</label>
            <div style="line-break: 70px;">
            <input type="text" id="txt1" onkeyup="sum();">
            </div>
<label for="Tinggi">Tinggi:</label>
            <div style="line-break: 70px;">
            <input type="text" id="txt2" onkeyup="sum();">
            </div>
            <form>
                 <button class="buttongo">Go!</button>
            </form>
<label for="Hasil">Hasil:</label>
            <div style="line-break: 70px;">
            <input type="text" id="txt3">
            </div><script>
  var pembagi = 100
  pembagi = 100

  function sum() {
    var txtFirstNumberValue = document.getElementById('txt1').value;
    var txtSecondNumberValue = document.getElementById('txt2').value;
    var txtTigaNumberValue = document.getElementById('pembagi').value;
    var result = parseFloat(txtFirstNumberValue) / parseFloat(txtTigaNumberValue) * parseFloat(txtSecondNumberValue);
    if (!isNaN(result)) {
      document.getElementById('txt3').value = result;
    }
  }
</script>Maksud saya dalam penulisan code ini agar penjumlahan (Total Gaya)/(100)*(Tinggi) berjalan. Terima kasih atas perhatiannya kak
avatar witjaksono
@witjaksono

8 Kontribusi 5 Poin

Diperbarui 3 tahun yang lalu

Tanggapan

Kode kamu sulit dibaca, coba taro di tag kode dan dirapikan agar bisa dibantu

oke kak saya coba perbaiki

4 Jawaban:

<div>Mohon bantuannya kak apabila terjadi kesalahan dalam code tersebut</div><div><br></div>

avatar witjaksono
@witjaksono

8 Kontribusi 5 Poin

Dipost 3 tahun yang lalu

Tanggapan

ubah kode kamu di pertanyaan, bukan jadi jawaban ya

<div>Jangan kelupaan&nbsp;<br>Tanda ini kak ;<br>😅 dibelakang nilai 100<br>Atau variabelnya</div>

avatar kru
@kru

4 Kontribusi 4 Poin

Dipost 3 tahun yang lalu

Tanggapan

akhirnya udah ketemu kak :'D

Jawaban Terpilih

<div>Hallo, izin bantu jawab yaa, permasalahannya yg bisa saya analisa ada beberapa :<br><br>1. Bagian&nbsp; : var pembagi = 100, ini sepertinya bukan masalah nyata, karena di javascript bisa deklarasi variabel tanpa diakhiri dengan tanda titik koma (;), tapi alangkah baiknya jika kamu gunakan tanda titik koma di setiap akhir baris kode kamu, agar terbiasa/disiplin, jadi kodemu agak strict. Intinya sih menghindari bugs atau error.<br><br>2. Pada method/function sum kamu, di body function nya kamu mengambil nilai dari element dengan attribut id txt1 dan txt2 secara langsung, oleh karenanya ketika kita mengetik sebuah huruf/karakter, element tersebut akan menjalankan function sum , karena ada beberapa yg nilainya null, maka function pun error, terutama pada proses perhitungannnya. Untuk mengatasi hal tersebut, mungkin bisa dipecah prosesnya seperti ini :<br><br></div><pre> function sum() { # Simpan element ke variabel tertentu let firstNumber = document.getElementById("txt1"); let secondNumber = document.getElementById("txt2");

# Simpan nilainya, jika pada element belum ada nilainya, maka set nilai variabelnya menjadi 0, untuk mencegah terjadi nilai null	
let txtFirstNumberValue = (firstNumber.value !== null) ? firstNumber.value : 0;
let txtSecondNumberValue = (secondNumber.value !== null) ? secondNumber.value : 0;

let txtTigaNumberValue = pembagi;
let result = parseFloat(txtFirstNumberValue) / parseFloat(txtTigaNumberValue) * parseFloat(txtSecondNumberValue);
if (!isNaN(result)) {
  document.getElementById(&#039;txt3&#039;).value = result;
}

}</pre><div><br>Kode akhirnya seperti ini :<br><br></div><pre>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Test&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;label for="Total Gaya"&gt;Total Gaya:&lt;/label&gt; &lt;div style="line-break: 70px;"&gt; &lt;input type="text" id="txt1" onkeyup="sum();"&gt; &lt;/div&gt; &lt;label for="Tinggi"&gt;Tinggi:&lt;/label&gt; &lt;div style="line-break: 70px;"&gt; &lt;input type="text" id="txt2" onkeyup="sum();"&gt; &lt;/div&gt; &lt;form&gt; &lt;button class="buttongo"&gt;Go!&lt;/button&gt; &lt;/form&gt; &lt;label for="Hasil"&gt;Hasil:&lt;/label&gt; &lt;div style="line-break: 70px;"&gt; &lt;input type="text" id="txt3"&gt; &lt;/div&gt; &lt;script&gt; let pembagi = 100;

          function sum() {
            let firstNumber = document.getElementById(&quot;txt1&quot;);
            let secondNumber = document.getElementById(&quot;txt2&quot;);

            let txtFirstNumberValue = (firstNumber.value !== null) ? firstNumber.value : 0;
            let txtSecondNumberValue = (secondNumber.value !== null) ? secondNumber.value : 0;
            let txtTigaNumberValue = pembagi;
            let result = parseFloat(txtFirstNumberValue) / parseFloat(txtTigaNumberValue) * parseFloat(txtSecondNumberValue);
            if (!isNaN(result)) {
              document.getElementById(&#039;txt3&#039;).value = result;
            }
          }
        &amp;lt;/script&amp;gt;

&lt;/body&gt; &lt;/html&gt;</pre><div><br>Kamu bisa cek langsung hasilnya disini&nbsp;<a href="https://jsfiddle.net/dzwgb5j1/">https://jsfiddle.net/dzwgb5j1/</a><br><br>Semoga membantu.</div>

avatar ahanafi
@ahanafi

815 Kontribusi 552 Poin

Dipost 3 tahun yang lalu

Tanggapan

Terima kasih kak atas pemaparannya, ini sangat membantu khususnya bagi saya.

<div>Terima kasih banyak atas bantuannya kak</div>

avatar witjaksono
@witjaksono

8 Kontribusi 5 Poin

Dipost 1 tahun yang lalu

Login untuk ikut Jawaban