compute sum dynamically with javascript

I have two textboxes Num1 and Num2 and another textbox Sum having the value 10.

How can I do this wherein if the user will enter a number for Num1, it will add it to Sum and dynamically change the displayed number in the Sum textbox. If the user will enter a number in Num2 it will also add that number to the updated number shown in Sum textbox and dynamically change the value for Sum textbox also.

How to do this in Javascript?

Answers:

Answer

Something like that:

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

Another version.


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



Answer
<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();
}

There are other ways to reference the form items, but this one works.

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

You're pretty close but you need to check for fields with empty values instead of just assuming they contain numbers. It works with only minor modifications in this JS fiddle

Changed your function to this:

function calculateTotal(numitems) {
    var totalAmt = 0;

    for (var cnt = 1; cnt <= numitems; cnt++) {
        var subtotal = document.getElementById('item_subtotal[' + cnt + ']');
        if (subtotal.value === null || subtotal.value === '') {
            continue;
        }

        totalAmt += (subtotal.value * 1);
    }

    document.getElementById('order_total').innerHTML = totalAmt;
}
Answer

I would look if the id exist, ie

  while(cnt <= numitems) {
    var curItem = document.getElementById('item_subtotal[' + cnt + ']');
    if(curItem!=null){
        totalAmt = parseInt(totalAmt) + parseInt(curItem.value);
    }
    cnt++;
  }

Furthermore, I would use the Firebug extension for Firefox to look at what might have gone wrong:

  while(cnt <= numitems) {
    var curItem = document.getElementById('item_subtotal[' + cnt + ']');
    if(curItem!=null){
        totalAmt = parseInt(totalAmt) + parseInt(curItem.value);
    }else{
        console.log('Couldn\'t find element item_subtotal[' + cnt + ']');
    }
    cnt++;
  }
Answer

The item hasn't been defined in your page - double check to make sure it's actually there in the source.

Answer

Your problem may be those square brackets.

From the html4 spec:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.