我想在输入上进行JavaScript实时计算,而无需提交按钮。
当我有1个输入文本字段时,我知道如何在JavaScript中进行实时计算。我将oninput事件用于输入文本字段。
但是当我有两个文本字段时呢?
我希望它做一些类似于这个链接的事情,在那里它无需提交按钮即可验证和计算:
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”。
你建议我怎么做呢?因为我不希望答案在输入第一个文本字段后一直显示为零。我希望它等到两个字段都输入了数字并验证后才开始实时计算。我也将为此添加验证代码。
谢谢
试着把你的问题表述出来,这样计算机就能理解它。
我只会做一些伪代码。所以你想计算一些东西:
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
绑定到两个输入字段,计算机就会理解。
您应该编写一个像valate()这样的函数,您必须检查两个inpute字段的值是否有效,然后计算结果,否则在字段上方显示一条警告消息,该消息是空的或具有错误的值
您必须在两个输入的onchange事件上调用验证函数
这不完全是我在生产环境中写这篇文章的方式。但这至少应该给你一个好的开始,让你开始寻找你所描述的非常基本的功能。
<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);
}