javascript - 比较两个输入字段 - 我做错了什么？

Question

原谅我，但我才刚刚开始学习 Javascript。我正在尝试获取两个输入字段的总和，并且我想在每个 keyup 事件上更新结果“实时”。

目前，当在输入字段中输入值时，结果字段就会消失。

我究竟做错了什么？

太感谢了，

彼得

编辑：我多么愚蠢，我忘了发布代码

http://jsfiddle.net/u7VwP/

var inputFirst = $('#first'),
    inputSecond = $('#second'),
    inputFirstVal = inputFirst.val(),
    inputSecondVal = inputSecond.val();

function getResult(first, second) {
 var result = first + second;
 $('p#result').text(result);
};


inputFirst.on('keyup', function() {
 getResult(inputFirstVal, inputSecondVal);
});
inputSecond.on('keyup', function() {
 getResult(inputFirstVal, inputSecondVal);
});​

Answer 1

inputFirstVal = inputFirst.val(),
inputSecondVal = inputSecond.val();

这些变量只初始化一次。您需要val()在要读取当前值的确切时刻调用。

见http://jsfiddle.net/u7VwP/7/

更新：已添加parseInt，因此您将添加数字而不是字符串。

请注意以下语法：

first = parseInt(first) || 0;

如果 的结果parseInt是假的（例如NaN当我们无法解析数字时“不是数字”，或者是文字 0），则该值默认为运算符右侧的||0。

Answer 2

var inputFirst = $('#first'),
    inputSecond = $('#second');

function getResult() {
    var result = (parseInt(inputFirst.val()) || 0) + (parseInt(inputSecond.val()) || 0);
    $('#result').text(result);
};

inputFirst.on('keyup', function() {
    getResult();
});
inputSecond.on('keyup', function() {
    getResult();
});​

Answer 3

您必须阅读和思考 Javascript 代码的运行时。在您的示例中，当输入字段为空时会读取变量。因此，他们将永远是空的。您必须在将它们添加在一起的函数中读出它们。

此外，我建议您查看 jQuery 选择器。在以下代码中，为两个对象进行了绑定。

$(document).ready(function() {
    $('#first, #second').bind('keyup', function() {
        $('#result').val($('#first').val() + $('#second').val());
    });
});

Answer 4

var inputFirst = $('#first'),
    inputSecond = $('#second'),
    inputFirstVal = inputFirst.val(),
    inputSecondVal = inputSecond.val();

function getResult(first, second) {
    var result = (parseInt(first) || 0) + (parseInt(second) || 0);
    //field.val() returns strings not numbers so parsing to ints. If letter is passed, consider it as 0
    $('p#result').text(result);
};

function handler()
{
  getResult(inputFirst.val() || 0, inputSecond.val() || 0); 
  // if value is null or undefined pass 0 to the function
}

inputFirst.on('keyup', handler);
inputSecond.on('keyup', handler);​

Answer 5

根据我的评论，getResult 函数将结束为：

function getResult() {
 inputFirstVal = inputFirst.val(),
 inputSecondVal = inputSecond.val();
 var result = inputFirstVal  + inputSecondVal ;
 $('p#result').text(result);
};

在更改时，您只需调用该函数：

inputFirst.on('keyup', getResult);
inputSecond.on('keyup', getResult);