вычислить сумму динамически с помощью javascript

У меня есть два текстовых поля Num1 и Num2 и другое текстовое поле Sum, имеющее значение 10.вычислить сумму динамически с помощью javascript

Как это сделать, если пользователь вводит номер для Num1, он добавит его в Sum и динамически изменит отображаемый номер в текстовом поле Sum. Если пользователь вводит номер в Num2, он также добавит это число к обновленному номеру, указанному в текстовом поле Sum, и динамически изменит значение для текстового поля Sum.

Как это сделать в Javascript?

источник

2010-10-27 anonymous

<input type="text" id="Num1" name="Num1"/> 
<input type="text" id="Num2" name="Num2"/> 
<input type="text" id="Sum" name="Sum"/> 


function addNums() { 
    var num1 = parseInt(document.getElementById('Num1').value,10); 
    var num2 = parseInt(document.getElementById('Num2').value,10) 
    document.getElementById('Sum').value = (num1 + num2).toString(); 
}

Есть другие способы ссылки на элементы формы, но этот работает.

источник

2010-10-27 03:43:24 Robusto

Если функция "addNums" вызывается несколько раз, скажем, с 'setInterval', то сумма может регулярно обновлять. Это лучше, чем в зависимости от обработчика «onchange» входных элементов, который может срабатывать в неожиданные моменты времени для пользователя (например, после изменения фокуса, а не когда пользователь «заканчивает» ввод). – maerics

@maerics: Я думаю, вы имели в виду этот комментарий для ответа @ jtp. Он говорит о обработчиках обмена. Объем моего ответа не имел никакого отношения к тому, когда функция вызывалась, она просто иллюстрировала механику добавления числовых значений в элементах ввода. – Robusto

@maerics - Хорошая точка для события обмена. Даже с его пристрастиями к браузеру это технически семантическая ошибка в этом случае, так как ввод того же значения не будет обновлять сумму. – JTP

Нечто подобное:

<input type="text" id="Num1" value="1" onblur="recalculateSum();"/> 
<span>+</span> 
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/> 
<span>=</span> 
<input type="text" id="Sum" value=""/> 
<script> 

    function recalculateSum() 
    { 
     var num1 = parseInt(document.getElementById("Num1").value); 
     var num2 = parseInt(document.getElementById("Num2").value); 
     document.getElementById("Sum").value = num1 + num2; 

    } 

</script>

источник

2010-10-27 03:47:06 TarasB

Проблема возникает, потому что когда я использую '+', она будет конкатенацией. – anonymous

не будет. Там parseInt. – TarasB

Другой вариант.


<!DOCTYPE html> 
<html> 
<head> 
<title>Summer</title> 
</head> 
<body> 
    Num 1: <input type="text" id="num1" name="num1" value="4"/><br /> 
    Num 2: <input type="text" id="num2" name="num2" value="6"/><br /> 
    Sum <input type="text" id="sum" name="sum" value="10"> 

<script type="text/javascript"> 
    var _num1 = document.getElementById('num1'); 
    var _num2 = document.getElementById('num2'); 
    var _sum = document.getElementById('sum'); 

    _num1.onblur = function(){ 
    _sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10)); 
    }; 
    _num2.onblur = function(){ 
    _sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10)); 
    }; 
</script> 
</body> 
</html>

источник

2010-10-27 03:58:56 JTP

лично, это самое чистое –

Спасибо @ScottSEA. Хотя после прочтения комментариев от maerics и Robusto я пошел с событием onblur, так как onchange не будет обновлять сумму, если в поле ввода будет введено такое же число. :) – JTP

это дает мне кумулятивную сумму ... Например, если я изменяю первое поле с 4 на 3, я получаю 13 вместо 9 (предыдущая сумма 10 + новый номер 3). Это намеренно? – redux

<input type="text" id="Num1" value="1" onblur="recalculateSum();"/> 

<input type="text" id="Num2" value="1" onblur="recalculateSum();"/> 

<input type="text" id="Sum" value=""/> 
<script> 

    function recalculateSum() 
    { 
     var num1 = parseInt(document.getElementById("Num1").value); 
     var num2 = parseInt(document.getElementById("Num2").value); 
     document.getElementById("Sum").value = num1 + num2; 

    } 

</script>

источник

2012-03-12 13:57:21

<!DOCTYPE html> 
<html> 
<head> 

    <script type="text/javascript"> 
function calculate(){ 
    var x=parseInt(document.getElementById("first").value); 
    var y=parseInt(document.getElementById("second").value); 
    document.getElementById("answer").value=(x+y); 
    } 
    </script> 

    <title>exam</title> 
</head> 

<body> 
    <form> 
     First:<input id="first" name="first" type="text"><br> 
     Second:<input id="second" name="second" type="text"><br> 
     Answer:<input id="answer" name="answer" type="text"><br> 
     <input onclick="calculate()" type="button" value="Addition"> 
    </form> 
</body> 
</html>

источник

2015-07-23 02:06:15

вычислить сумму динамически с помощью javascript

ответ

Смежные вопросы