如何在同一時間使用JavaScript的onkeyup多個ID

Question

我有2個HTML文本框供用戶輸入數字。綜上所述那些數字，我是值傳遞給JavaScript變量和加入後顯示結果以HTML DIV部分

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

但我有JavaScript的問題。它不顯示結果。如何在同一個onkeyup函數中添加這兩個函數。

FIDDLE SETUP

Answer 1

試試這個：

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/

更新：隱藏在案件的總和爲零的結果，改變最後一行：

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

它你的代碼，變種a是局部變量。使其成爲全局變量。

但我會使用此代碼。

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