我的目标是在表单中获取用户输入:名字、姓氏、电话号码、产品 1、产品 2 和产品 3。然后使用名为“计算”的按钮，它将验证所有表单并添加产品 1、2 和 3 的总值(value)。
我可以验证表单，但我的代码不会打印总数。 非常感谢任何帮助!
代码如下:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["First name"].value;
var y = document.forms["myForm"]["Last name"].value;
var Z = document.forms["myForm"]["Phone"].value;
var amount1 = parseInt(document.getElementById("amount1").value);
var amount2 = parseInt(document.getElementById("amount2").value);
var amount3 = parseInt(document.getElementById("amount3").value);
if (x == "") {
alert("First name must be filled out");
return false;
}
if (y == "") {
alert("Last name must be filled out");
return false;
}
if (Z == "") {
alert("Phone number must be filled out");
return false;
}
if (isNaN(amount1)) {
alert("Please enter the amount for product 1");
return false;
}
if (isNaN(amount2)) {
alert("Please enter the amount for product 2");
return false;
}
if (isNaN(amount3)) {
alert("Please enter the amount for product 3");
return false;
}
var total = amount1 + amount2 + amount3;
document.getElementById("p1").innerHTML = total;
}
</script>
</head>
<body>
<form name="myForm">
First Name: <input type="text" name="First name"> <br> <br> Last Name: <input type="text" name="Last name"><br> <br> Phone Number: <input type="text" name="Phone"> <br> <br> Product 1: <input type="text" id="amount1"> <br> <br> Product 2:
<input
type="text" id="amount2"> <br> <br> Product 3: <input type="text" id="amount3"> <br> <br>
<br>
<input onclick="validateForm()" type="button" value="Calculate">
</form>
<p id="p1"> (Results) </p>
</body>
</html>编辑了评论中发现的错误，但问题仍然是无法打印总数。
最佳答案
错误是获取元素的函数是getElementById而不是GetElementById，所以改变这个
var amount1 = parseInt(document.GetElementById("amount1").value);
var amount2 = parseInt(document.GetElementById("amount2").value);
var amount3 = parseInt(document.GetElementById("amount3").value);
到
var amount1 = parseInt(document.getElementById("amount1").value);
var amount2 = parseInt(document.getElementById("amount2").value);
var amount3 = parseInt(document.getElementById("amount3").value);
而且输入缺少id，因此请使用
Product 1: <input type="text" id="amount1"> <br> <br>
Product 2: <input type="text" id="amount2"> <br> <br>
Product 3: <input type="text" id="amount3"> <br> <br>
最后一点，在您的情况下，您使用的是 Prod1, Prod2, Prod3，其中您的变量是 amount1, amount2, amount3，所以它们应该像这个:
if (isNaN(amount1)) {
alert("Please enter the amount for product 1");
return false;
}
if (isNaN(amount2)) {
alert("Please enter the amount for product 2");
return false;
}
if (isNaN(amount3)) {
alert("Please enter the amount for product 3");
return false;
}
关于javascript - 使用 JS 验证并合计用户输入的总和，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59041764/