javascript 添加两个文本框值并自动在第三个文本框中显示总和

Add two textbox values and display the sum in a third textbox automatically

提问by Monica

I have assigned a task to add two textbox values.I want the result of addition to appear in the 3rd textbox,as soon as enter the values in the first two textboxes,without pressing any buttons.

我分配了一个任务来添加两个文本框值。我希望添加的结果出现在第三个文本框中，只要在前两个文本框中输入值，而无需按任何按钮。

For eg:In the first textbox i want to enter 450,when i press digit 4 of number '450',then it will be added to the 3rd textbox,any number i press in the first two textboxes,suddenly that changes will be reflected on the third textbox.How can i do this?

例如：在第一个文本框中，我想输入 450，当我按下数字“450”的第 4 位时，它将被添加到第三个文本框中，我在前两个文本框中按下的任何数字，突然会反映出更改在第三个文本框上。我该怎么做？

Here i write my code call sum() in onkeyup

在这里，我在 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;
        }
}

This is not working in chrome

这在 chrome 中不起作用

回答by Qasim Javaid Khan

try this

试试这个

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

回答by Dhaval Marthak

Try this: Open given fiddle in CHROME

试试这个：在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

HTML

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

DEMO HERE

演示在这里

回答by Abdennour TOUMI

i didn't find who made elegant answer , that's why let me say :

我没有找到谁给出了优雅的答案，这就是为什么让我说：

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>

回答by Abdallah Ghrb

Since eval("3+2")=5,you can use it as following :

因为eval("3+2")=5，您可以按如下方式使用它：

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

By that, you don't need parseInt

那样的话，你不需要 parseInt

回答by Ritz

In below code i have done operation of sum and subtraction: because of using JavaScriptif you want to call function, then you have to put your below code outside of document.ready(function{ });and outside the script end tag.

在下面的代码中，我完成了求和和减法的操作：因为如果要调用函数，则使用JavaScript，则必须将下面的代码放在document.ready(function{ });脚本结束标记之外和之外。

I have taken one another script tag for this operation.And put below code between script starting tag // your code // script ending tag.

我为此操作使用了另一个脚本标记。并将下面的代码放在脚本开始标记 // 您的代码 // 脚本结束标记之间。

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

And put onkeyup="operation();"inside all 5 textboxes in your html form. This code running in both Firefox and Chrome.

并onkeyup="operation();"在您的 html 表单中放入所有 5 个文本框。此代码在 Firefox 和 Chrome 中运行。

回答by cat_minhv0

Well, base on your code, you would put onkeyup=sum()in each text box txt1 and txt2

好吧，根据您的代码，您将onkeyup=sum()放在每个文本框txt1 和 txt2 中

回答by Muhammad Ramahy

well I think the problem solved this below code works:

好吧，我认为问题解决了下面的代码有效：

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

回答by Adnan Khan

This is the correct code

这是正确的代码

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