Question

我想在输入时进行JavaScript实时计算，而无需提交按钮。

我知道当我有1个输入文本字段时，如何在JavaScript中进行实时计算。我对输入文本字段使用oninput事件。

但是当我有2个文本字段时呢？

我希望它能够像这个链接那样进行验证和计算，而无需提交按钮：

https://www.easycalculation.com/algebra/modulo-calculator.php

以下面的代码为例：

// input
var a = document.getElementById("a").value; 
var b = document.getElementById("b").value;

// calculation
var result = a * b;

// display result
document.getElementById("result").value;

由于有2个输入文本字段（a和b），我希望它仅在用户在两个文本字段中输入有效数据后才进行即时/实时计算。

但如果用户更改任一字段，我也希望它进行实时计算。因此，如果他们输入“a”和“b”，它会给出结果，但如果他们改变“a”，那么它会立即给出新的结果而不必触及“b”。

你怎么建议我这样做？因为我不想在第一个文本字段中输入后立即显示为Zero的答案。我希望它等到两个字段都有数字输入并验证后再开始实时计算。我也将为此添加验证代码。

感谢

Answer 1

只需尝试制定您的问题，以便计算机能够理解它。

我会做一些伪代码。所以你想要计算一些东西：

function calculate (valueA, valueB) {
    ... do something ...
    ... output result ...
}

您想要检查两个字段是否有效，然后才进行计算和输出：

function checkFields (fieldA, fieldB) {
    if (fieldA.value.length > 0) { // if it is empty, there is no input
        ... do some additional checking ...
        if (fieldB.value.length > 0) { // if it is empty, there is no input
            ... do some additional checking ...
            ... if all went well: calculate (fieldA.value, fieldB.value);
        }
    }
}

然后将checkFields绑定到两个输入字段，并且计算机可以理解。

Answer 2

你应该写一个像validate（）这样的函数，你必须检查两个输入字段的值，如果它有效，那么计算结果否则会在字段上方显示一条警告信息，该字段为空或者值为错误

您必须在两个输入的onchange事件上调用validate函数

Answer 3

这不完全是我在生产环境中写这个的方式。但这至少应该为你正在寻找的东西提供一个良好的开端 - 你描述的非常基本的功能。

<form>
    <input id='a' class='ab' type='text' name='valA'>
    <input id='b' class= 'ab' type='text' name='valB'>
</form>

//下面带有此标记的JS代码

var someCompositeGroup = document.getElementsByClassName("ab");

function validateForm(){

    // add stuff here 
    var inputVal = 0; 
    var aVal = someCompositeGroup[0] && someCompositeGroup[0].value;
    var bVal = someCompositeGroup[1] && someCompositeGroup[1].value;

    if (aVal && bVal && !isNaN(aVal) && !isNaN(bVal)) {
        inputVal = aVal * bVal; 
        // only update here - 
       console.log(inputVal);
    } else {
        console.log(' not ready to calculate yet '); 
    }
}

for (var i = 0; i < someCompositeGroup.length; i++) {
    someCompositeGroup[i].addEventListener('keyup', validateForm);
}

JavaScript实时验证和计算2个或更多输入文本字段

3 个答案: