Добавление числового значения в HTML

Question

У меня есть этот HTML и Java Script. Я устанавливаю для того, чтобы автоматически отображать общее количество этих трех полей ввода. Но это дает мне неправильный ответ, если я использую + (добавление). Я хорошо работаю, если использую * (умножить) или/(делить.) Любой, пожалуйста, помогите!

Вот мой код 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> 

Heres мой Java Script ...

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

ИЛИ

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>