Question

我有这个HTML和Java脚本。我设置为自动显示这3个输入字段的总量。但如果我使用+（添加），它会给我错误的答案。如果我使用*（乘法）或/（devide。）我工作得很好。任何一个请帮助！

这是我的HTML代码。

</pre>
    <tr>
        <td><input type='number' id='amt1' name='amt1' onkeyup='total_amount();' onKeyUp='return numbersonly(event);' class='form-control'></td>
        <td><input type='number' id='amt2' name='amt2' onkeyup='total_amount();' onKeyUp='return numbersonly(event);' class='form-control'></td>
        <td><input type='number' id='amt3' name='amt3' onkeyup='total_amount();' onKeyUp='return numbersonly(event);' class='form-control'></td>
        <td><input type='number' id='total' name='total' class='form-control' readonly='readonly'></td>
    </tr>
<pre>

继承我的Java脚本......

<script type="text/javascript">

    function total_amount()
    {
        document.getElementById('total').value = document.getElementById('amt1').value + document.getElementById('amt2').value + document.getElementById('amt3').value
    }

    function numbersonly(e){
       var unicode=e.charCode? e.charCode : e.keyCode
       if (unicode!=8 && unicode!=46 && unicode!=37 && unicode!=27 && unicode!=38 && unicode!=39 && unicode!=40 && unicode!=9){ //if the key isn't the backspace key (which we should allow)
           if (unicode<48||unicode>57)
               return false
        }
    }

</script>
</pre>

Answer 1

保持简单。使用event delegation和一个keyUp处理程序。不要使用内联处理程序。在使用它进行计算之前，将字段值转换为Number。这是一个例子：

＆＃13;

document.querySelector('table').addEventListener('keyup', sum);

function sum(e) {
  var from = e.target || e.srcElement
     ,isNumericInput = /number/i.test(from.type);
  if (!isNumericInput) {return true;}
  var d = document
     ,inputs = d.querySelector('table').querySelectorAll('[type=number]')
     ,sumfld = d.querySelector('#sum')
     ,sumnow = 0;
  
  [].forEach.call(inputs,
                  function (v) {
                      sumnow += +(v.value); //<= conversion to Number, using +
                   });
  
  sumfld.textContent = sumnow;
}

＆＃13;

<table>
  <tr>
   <td><input type='number' id='amt1' name='amt1' class='form-control'></td>
   <td><input type='number' id='amt2' name='amt2' class='form-control'></td>
   <td><input type='number' id='amt3' name='amt3' class='form-control'></td>
   <td><b>Total</b>: <span id="sum"></span></td>
  </tr>
</table>

＆＃13;

Answer 2

使用

document.getElementById('amt1').value|0 +
document.getElementById('amt2').value|0 +
document.getElementById('amt3').value|0 ;

OR

parseInt(document.getElementById('amt1').value) +
parseInt(document.getElementById('amt2').value) +
parseInt(document.getElementById('amt3').value) ;

以便将这些视为数字

Answer 3

更改你的功能

function total_amount() {
    var amt1 = parseInt(document.getElementById('amt1').value);
    if (isNaN(amt1)) {
        amt1 = 0;
    }

    var amt2 = parseInt(document.getElementById('amt2').value);
    if (isNaN(amt2)) {
        amt2 = 0;
    }

    var amt3 = parseInt(document.getElementById('amt3').value);
    if (isNaN(amt3)) {
        amt3 = 0;
    }

    document.getElementById('total').value = amt1 + amt2 + amt3;
}

Answer 4

使用parseInt()。

function total_amount()
{
    document.getElementById('total').value =parseInt( document.getElementById('amt1').value) +   
parseInt(document.getElementById('amt2').value) + parseInt(document.getElementById('amt3').value)
}

Answer 5

将字符串（由.value返回）转换为数字的简单解决方案是使用一元+运算符：

function total_amount() { 
    document.getElementById('total').value = 
        +document.getElementById('amt1').value + 
        +document.getElementById('amt2').value + 
        +document.getElementById('amt3').value 
}

在HTML中添加数值

5 个答案: