如何使用javascript從輸入字段獲取值

Question

我有一些問題需要從輸入字段獲取值。
某些輸入字段是計算過程的結果，例如＃t1_potensi和＃t2_potensi。 #aliran是整個計算過程的結果。

這是我的HTML代碼。

<input oninput="hitung()" name="v_potensi" id="v_potensi" type="text" placeholder="liter . . ." />   
<input oninput="hitung()" name="a_potensi" id="a_potensi" type="text" placeholder="menit . . ." /> 
<input oninput="hitung()" name="b_potensi" id="b_potensi" type="text" placeholder="menit . . ." /> 

<input oninput="hitungT1()" name="kecepatan_air" id="kecepatan_air" type="text" placeholder="km/jam . . ." /> 
<input oninput="hitungT1()" name="jarak1" id="jarak1" type="text" placeholder="kilometer . . ." /> 

<input oninput="hitungT2()" name="kecepatan_back" id="kecepatan_back" type="text" placeholder="km/jam . . ." /> 
<input oninput="hitungT2()" name="jarak2" id="jarak2" type="text" placeholder="kilometer . . ." /> 

<!-- #t1_potensi = 0.65 + ((60/#kecepatan_air) * #jarak1) --> 
<input readonly="readonly" oninput="hitung()" name="t1_potensi" id="t1_potensi" type="text" placeholder="menit . . ." /> 

<!-- #t2_potensi = 0.65 + ((60/#kecepatan_back) * #jarak2) --> 
<input readonly="readonly" oninput="hitung()" name="t2_potensi" id="t2_potensi" type="text" placeholder="menit . . ." /> 

<!-- #aliran = (#v_potensi/(#a_potensi + #b_potensi + #t1_potensi + #t2_potensi)) - 0.1 --> 
<input readonly="readonly" name="aliran" id="aliran" type="text" placeholder="liter/menit . . ." /> 

我使用JavaScript做計算過程，以獲取＃t1_potensi和＃t2_potensi結果。我的問題開始時，我嘗試計算整體（#aliran），我的JavaScript函數特別是獲取整體結果無法正常工作。在這裏，我的＃t1_potensi，＃t2_potensi和#aliran的javascript。

//To get #t1_potensi  
function hitungT1() { 
       var kecKm = document.getElementById('kecepatan_air').value; 
       var d1 = document.getElementById('jarak1').value; 
       var result = document.getElementById('t1_potensi'); 
       //convert Km/jam to mph 
       var kecMph = Math.round(kecKm * 0.621371192); 
       //convert liter to miles 
       var d1Miles = d1 * 0.621371192; 
       var x = 60/kecMph; 
       var kali = x.toFixed(1) * d1Miles.toFixed(2); 
       var hasil = 0.65 + kali; 
       result.value = hasil.toFixed(2); 
      } 
//To get #t2_potensi 
function hitungT2() { 
       var kecKm = document.getElementById('kecepatan_back').value; 
       var d2 = document.getElementById('jarak2').value; 
       var result = document.getElementById('t2_potensi'); 
       //convert Km/jam to mph 
       var kecMph = Math.round(kecKm * 0.621371192); 
       //convert liter to miles 
       var d1Miles = d2 * 0.621371192; 
       var x = 60/kecMph; 
       var kali = x.toFixed(1) * d1Miles.toFixed(2); 
       var hasil = 0.65 + kali; 
       result.value = hasil.toFixed(2); 
      } 

//To get #aliran 
function hitung() { 
       var vol = document.getElementById('v_potensi').value; 
       var a = document.getElementById('a_potensi').value; 
       var b = document.getElementById('b_potensi').value; 
       var t1 = document.getElementById('t1_potensi').value; 
       var t2 = document.getElementById('t2_potensi').value; 
       var hasil = document.getElementById('aliran'); 
       //convert liter to galon 
       var galon = Math.round(vol * 0.264172051); 
       var sumT = t1 + t2; 
       var sum = a + sumT + b; 
       var dev = galon/sum; 
       var result = Math.round(dev - 0.1); 
       hasil.value = result; 
      } 

有誰可以幫我解決我的問題？或者可能使我的JavaScript功能更有效。謝謝。

Answer 1

使用parseFloat()在你通過document.getElementById獲取（「...」）值的數字：

//To get #t1_potensi  
function hitungT1() { 
      var kecKm = parseFloat(document.getElementById('kecepatan_air').value); 
      var d1 = parseFloat(document.getElementById('jarak1').value); 
      var result = document.getElementById('t1_potensi'); 
      //convert Km/jam to mph 
      var kecMph = Math.round(kecKm * 0.621371192); 
      //convert liter to miles 
      var d1Miles = d1 * 0.621371192; 
      var x = 60/kecMph; 
      var kali = x.toFixed(1) * d1Miles.toFixed(2); 
      var hasil = 0.65 + kali; 
      result.value = hasil.toFixed(2); 
     } 
//To get #t2_potensi 
function hitungT2() { 
      var kecKm = parseFloat(document.getElementById('kecepatan_back').value); 
      var d2 = parseFloat(document.getElementById('jarak2').value); 
      var result = document.getElementById('t2_potensi'); 
      //convert Km/jam to mph 
      var kecMph = Math.round(kecKm * 0.621371192); 
      //convert liter to miles 
      var d1Miles = d2 * 0.621371192; 
      var x = 60/kecMph; 
      var kali = x.toFixed(1) * d1Miles.toFixed(2); 
      var hasil = 0.65 + kali; 
      result.value = hasil.toFixed(2); 
     } 

//To get #aliran 
function hitung() { 
      var vol = parseFloat(document.getElementById('v_potensi').value); 
      var a = parseFloat(document.getElementById('a_potensi').value); 
      var b = parseFloat(document.getElementById('b_potensi').value); 
      var t1 = parseFloat(document.getElementById('t1_potensi').value); 
      var t2 = parseFloat(document.getElementById('t2_potensi').value); 
      var hasil = document.getElementById('aliran'); 
      //convert liter to galon 
      var galon = Math.round(vol * 0.264172051); 
      var sumT = t1 + t2; 
      var sum = a + sumT + b; 
      var dev = galon/sum; 
      var result = Math.round(dev - 0.1); 
      hasil.value = result; 
     } 

而且，這是一個有點棘手我，你爲什麼叫hitung()功能後，才編輯前三個文本框中的一個。每次更改任何字段時爲什麼不調用所有三個函數？這不會更好嗎？

由你決定。此外，在您放置parseFloat來電之後，請使用console.log(string or variable to log)，例如， console.log('dev is: ' + dev)。通過這種方式，您可以輕鬆調試代碼 - 查看計算過程中的所有值。

另外，你是否真的需要圍繞最終結果？