gpt4 book ai didi

javascript - 使用 JS 验证并合计用户输入的总和

转载 作者:行者123 更新时间:2023-12-01 00:25:35 25 4
gpt4 key购买 nike

我的目标是在表单中获取用户输入:名字、姓氏、电话号码、产品 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com