3

我有 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 函数中添加这两个函数。

小提琴设置

4

2 回答 2

5

尝试这个：

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/

于 2013-07-28T08:14:44.390 回答
1 
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();
}
于 2013-07-28T08:14:20.100 回答