Question

以下部分工作：

function pvst(x,y){

    return parseInt(x)/100 * parseInt(y);
}

var value1 = document.getElementById('v1').value,
    value2 = document.getElementById('v2').value,
    input_1 = document.getElementById('v1'),
    input_2 = document.getElementById('v2');

function insertValue(){

    var newSum = pvst(value1, value2);

    if(isNaN(newSum) === true){
        document.getElementById("test").innerHTML = 'only numbers!!';
    }

    else{
        document.getElementById("test").innerHTML = newSum;
    }

}

input_1.onkeyup = insertValue();
input_2.onkeyup = insertValue();

然而，onkeyup没有按预期工作。它会在您输入后立即更新newSum。我无法弄清楚我在哪里做错了

Answer 1

问题我看到你调用函数而不是传递函数处理程序：

使用此功能（已移除()）：

input_1.onkeyup = insertValue;
input_2.onkeyup = insertValue;

而不是：

input_1.onkeyup = insertValue();
input_2.onkeyup = insertValue();

如果你不这样做，你的onkeyup事件将尝试执行函数结果而不是执行函数。由于你没有在insertValue函数中返回任何内容，因此它们只获得undefined值并且什么都不做。

更新的当您将值存储在变量中时，每次更改输入后都不会更新它们并使用始终相同的值，要查看从DOM再次获取它们所需的值，因此您需要执行以下操作：

var newSum = pvst(document.getElementById('v1').value, document.getElementById('v2').value);

我这边的更新代码应如下所示：

function pvst(x,y){
    return parseInt(x)/100 * parseInt(y);
}

var input_1 = document.getElementById('v1'),
    input_2 = document.getElementById('v2');

function insertValue(){

    var newSum = pvst(input_1.value, input_2.value);

    if(isNaN(newSum) === true){
        document.getElementById("test").innerHTML = 'only numbers!!';
    } else {
        document.getElementById("test").innerHTML = newSum;
    }
}

input_1.onkeyup = insertValue;
input_2.onkeyup = insertValue;

Answer 2

试试这个：

function pvst(x, y) {

        return parseInt(x) / 100 * parseInt(y);
    }

    function insertValue() {

        var value1 = document.getElementById('v1').value;
        value2 = document.getElementById('v2').value;
        input_1 = document.getElementById('v1');
        input_2 = document.getElementById('v2');

        var newSum = pvst(value1, value2);

        if (isNaN(newSum) === true) {
            document.getElementById("test").value = 'only numbers!!';
        }

        else {
            document.getElementById("test").value = newSum;
        }

    }

示例HTML：

<input id="v1" type="text" onkeyup="insertValue();" />
<input id="v2" type="text" onkeyup="insertValue();" />

<input id="test" />

关键字功能的JavaScript

2 个答案: