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

它是你的代码，var 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();
}

如何同时使用javascript keyup多个id

2 个答案: