添加兩個文本框值並自動在第三個文本框中顯示總和

Question

我已經分配了一個任務來添加兩個文本框值。我希望添加的結果出現在第三個文本框中，只要在前兩個文本框中輸入值，而不按任何按鈕。

例如：在第一個文本框中我想輸入450，當我按下數字'450'的數字4時，它將被添加到第3個文本框，任何數字我按在前兩個文本框中，突然顯示更改將被反映在第三個文本框上。我怎么能這樣做？

在這里，我在onkeyup中編寫代碼調用sum（）

onkeyup="sum()"
function sum() {
        var txtFirstNumberValue = document.getElementById('txt1').value;
        var txtSecondNumberValue = document.getElementById('txt2').value;
        var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
        if(!isNaN(result)){
            document.getElementById('txt3').value = result;
        }
}

這不適用於chrome

Answer 1

嘗試這個

  function sum() {
       var txtFirstNumberValue = document.getElementById('txt1').value;
       var txtSecondNumberValue = document.getElementById('txt2').value;
       if (txtFirstNumberValue == "")
           txtFirstNumberValue = 0;
       if (txtSecondNumberValue == "")
           txtSecondNumberValue = 0;

       var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
       if (!isNaN(result)) {
           document.getElementById('txt3').value = result;
       }
   }

Answer 2

試試這個：在CHROME打開小提琴

function sum() {
      var txtFirstNumberValue = document.getElementById('txt1').value;
      var txtSecondNumberValue = document.getElementById('txt2').value;
      var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
      if (!isNaN(result)) {
         document.getElementById('txt3').value = result;
      }
}

HTML

<input type="text" id="txt1"  onkeyup="sum();" />
<input type="text" id="txt2"  onkeyup="sum();" />
<input type="text" id="txt3" />

在這里演示

Answer 3

我沒有找到誰做出優雅的答案，這就是為什么讓我說：

Array.from(
   document.querySelectorAll('#txt1,#txt2')
).map(e => parseInt(e.value) || 0) // to avoid NaN
.reduce((a, b) => a+b, 0)

 window.sum= () => document.getElementById('result').innerHTML= Array.from( document.querySelectorAll('#txt1,#txt2') ).map(e=>parseInt(e.value)||0) .reduce((a,b)=>a+b,0) 

 <input type="text" id="txt1" onkeyup="sum()"/> <input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;"/><span id="result"></span> 

Answer 4

那么，根據你的代碼，你會在每個文本框txt1和txt2中放置onkeyup = sum（）

Answer 5

以及我認為問題解決了以下代碼的工作原理：

function sum() {
    var result=0;
       var txtFirstNumberValue = document.getElementById('txt1').value;
       var txtSecondNumberValue = document.getElementById('txt2').value;
    if (txtFirstNumberValue !="" && txtSecondNumberValue ==""){
        result = parseInt(txtFirstNumberValue);
    }else if(txtFirstNumberValue == "" && txtSecondNumberValue != ""){
        result= parseInt(txtSecondNumberValue);
    }else if (txtSecondNumberValue != "" && txtFirstNumberValue != ""){
        result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
    }
       if (!isNaN(result)) {
           document.getElementById('txt3').value = result;
       }
   }

Answer 6

這是正確的代碼

function sum() 
{ 
    var txtFirstNumberValue = document.getElementById('total_fees').value; 
    var txtSecondNumberValue = document.getElementById('advance_payement').value; 
    var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue); 
    if(txtFirstNumberValue=="" ||txtSecondNumberValue=="") 
    { 
        document.getElementById('balance_payement').value = 0; 
    }
    if (!isNaN(result)) 
    { 
        document.getElementById('balance_payement').value = result;
    }
} 

Answer 7

由於eval("3+2")=5 ，您可以使用如下：

byId=(id)=>document.getElementById(id); 
byId('txt3').value=eval(`${byId('txt1').value}+${byId('txt2').value}`)

這樣，你不需要parseInt

Answer 8

在下面的代碼中我已經完成了sum和subtraction的操作：因為如果你想調用函數使用JavaScript ，那么你必須將你的下面的代碼放在document.ready(function{ }); 並在腳本結束標記之外。

我為此操作添加了另一個腳本標記。並在腳本開始標記//代碼//腳本結束標記之間放置以下代碼。

 function operation() 

 {

   var txtFirstNumberValue = parseInt(document.getElementById('basic').value);
   var txtSecondNumberValue =parseInt(document.getElementById('hra').value);
   var txtThirdNumberValue =parseInt(document.getElementById('transport').value);
   var txtFourthNumberValue =parseInt(document.getElementById('pt').value);
   var txtFiveNumberValue = parseInt(document.getElementById('pf').value);

   if (txtFirstNumberValue == "")
       txtFirstNumberValue = 0;
   if (txtSecondNumberValue == "")
       txtSecondNumberValue = 0;
   if (txtThirdNumberValue == "")
       txtThirdNumberValue = 0;
   if (txtFourthNumberValue == "")
       txtFourthNumberValue = 0;
   if (txtFiveNumberValue == "")
       txtFiveNumberValue = 0;



   var result = ((txtFirstNumberValue + txtSecondNumberValue + 
  txtThirdNumberValue) - (txtFourthNumberValue + txtFiveNumberValue));
   if (!isNaN(result)) {
       document.getElementById('total').value = result;
   }
 }

並把onkeyup="operation();" 在html表單中的所有5個文本框中。 此代碼在Firefox和Chrome中運行。