JavaScript on keyup function

JavaScript on keyup function

本文关键字：function keyup on JavaScript      更新时间：2023-09-26

以下部分工作：

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。我不知道我哪里做错了

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

使用这个（删除()）：

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;

试试这个：

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" />
相关文章：