我正在尝试创建一个脚本,它将接受2个输入并计算总和。我希望在计算发生之前验证两个输入 - 输入必须介于0到10之间。
然而,当我在两个字段中输入超过10的值(例如50)时,我只得到一个验证错误而不是两个。
可能出现什么问题?
function calc() {
var x, y, z, text1, text2;
// Get the value of the input field with id="numb"
x = Number(document.getElementById("val01").value);
y = Number(document.getElementById("val02").value);
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 0 || x > 10) {
text1 = "Input not valid";
document.getElementById("validation1").innerHTML = text1;
} else if (isNaN(y) || y < 0 || y > 10) {
text2 = "Input not valid";
document.getElementById("validation2").innerHTML = text2;
} else {
z = x + y;
document.getElementById("total").innerHTML = z;
}
}
<p>Please input a number between 0 and 10:</p>
1st number:<input id="val01" required> <b id="validation1"></b> <br>
2nd Number:<input id="val02" required> <b id="validation2"></b> <br>
<button onclick="calc()">click</button><br /> sum = <span id="total">0</span>
答案 0 :(得分:1)
您可以使用标志并检查它以进行计算。
跳过else
部分并改为使用该标志。
var ok = true;
if (isNaN(x) || x < 0 || x > 10) {
ok = false;
text1 = "Input not valid";
document.getElementById("validation1").innerHTML = text1;
}
if (isNaN(y) || y < 0 || y > 10) {
ok = false;
text2 = "Input not valid";
document.getElementById("validation2").innerHTML = text2;
}
if (ok) {
z = x + y;
document.getElementById("total").innerHTML = z;
}
答案 1 :(得分:0)
如果您的第一次验证失败(if (...)
),则不再执行第二次验证(else if (...)
)。
相反,彼此分开运行验证,只有在两次成功时才进行计算,例如:
function calc() {
var x, y, z, text1, text2;
// Get the value of the input field with id="numb"
x = Number(document.getElementById("val01").value);
y = Number(document.getElementById("val02").value);
var valid = true;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 0 || x > 10) {
text1 = "Input not valid";
document.getElementById("validation1").innerHTML = text1;
valid = false;
}
if (isNaN(y) || y < 0 || y > 10) {
text2 = "Input not valid";
document.getElementById("validation2").innerHTML = text2;
valid = false;
}
if(valid) {
z = x + y;
document.getElementById("total").innerHTML = z;
}
}
答案 2 :(得分:0)
由于if else语句中的逻辑构建方式,您只能获得一次验证。
你只能去&#34;里面&#34;三个语句中的一个,因为你在if else中使用if,当你需要进入多个语句时,你可以只使用if()的序列
<script>
function calc() {
var x, y, z, text1, text2;
// Get the value of the input field with id="numb"
x = Number(document.getElementById("val01").value);
y = Number(document.getElementById("val02").value);
var invalidX = true;
var invalidY = true;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 0 || x > 10) {
invalidX = false;
text1 = "Input not valid";
document.getElementById("validation1").innerHTML = text1;
}
if (isNaN(y) || y < 0 || y > 10) {
invalidY = false;
text2 = "Input not valid";
document.getElementById("validation2").innerHTML = text2;
}
if (invalidX && invalidY) {
z = x + y;
document.getElementById("total").innerHTML = z;
}
}
</script>
希望这就是你要找的东西。请注意,我还包含两个带有布尔值的变量,用于控制输入是否有效。
答案 3 :(得分:0)
删除代码中的else if条件,用于您正在进行的第二次验证。