在HTML中添加數字值

Question

我有這個HTML和Java腳本。我設置爲自動顯示這3個輸入字段的總金額。但是如果我使用+（添加），它會給我錯誤的答案。如果我使用*（乘）或/（分開），我工作得很好。任何人請幫助！

這是我的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

使用

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 2

更改功能

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 3

使用parseInt()。

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

Answer 4

爲一個字符串（由.value的返回）轉換爲數字的簡單解決方案是使用一元+操作者：

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

Answer 5

保持簡單。使用event delegation和一個keyUp處理程序。不要使用內聯處理程序。在對它進行計算之前，將字段值轉換爲Number。這裏有一個例子：

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

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