how to use javascript onkeyup for multiple ids at sametime

Question

I have 2 html textbox for users to enter numbers. To sum those numbers, I am passing the values to JavaScript variable and after addition displaying the result to html div section

<div class="input-left"><span><input  class="textbox" id="left" name="count" type="text" size="5"  value="" /></span></div>

<div class="input-right"><span><input  class="textbox" id="right" name="count" type="text" size="5"  value="" /></span></div>

<div id="result"> </div>

javascript:

document.getElementById('left').onkeyup = function() {
    var a = parseFloat(this.value);

}

document.getElementById('right').onkeyup = function() {
    var b = a + parseFloat(this.value);
    document.getElementById("result").innerHTML = b || 0 ;
}

But I have an issue with JavaScript. It not displaying the result. How to add both functions in same onkeyup function.

FIDDLE SETUP

Answer 1

Try this:

window.onload = function(){

    var left = document.getElementById('left');
    var right = document.getElementById('right');
    var result = document.getElementById("result");

    left.onkeyup = calc;
    right.onkeyup = calc;

    function calc() {
        var a = parseFloat(left.value) || 0;
        var b = parseFloat(right.value) || 0;
        result.innerHTML = a + b ;
    }

}

JSFiddle: http://fiddle.jshell.net/gYV8Z/3/

Update: To hide the result in case the sum equals zero , change the last line like this:

        result.innerHTML = ( a + b ) || "";

JSFiddle: http://fiddle.jshell.net/gYV8Z/4/

Answer 2

document.getElementById('left').onkeyup = function() {
var a = parseFloat(this.value);

}

document.getElementById('right').onkeyup = function() {
var b = a + parseFloat(this.value);
document.getElementById("result").innerHTML = b || 0 ;
}

it your code, var a is local variable. make it global variable.

but i would use this code.

function add(){
    return parseFloat(document.getElementById('left').value) + parseFloat(document.getElementById('right').value);
}

document.getElementById('left').onkeyup = function() {
document.getElementById("result").innerHTML = add();

}

document.getElementById('right').onkeyup = function() {
document.getElementById("result").innerHTML = add();
}