- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的目标是在表单中获取用户输入:名字、姓氏、电话号码、产品 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/
该集合有两个地理字段:fromLocation 和 toLocation。但只允许使用一个 Geonear。该集合看起来像: ............... fromLocation: {
我正在尝试一些应该很简单的事情,非常欢迎任何关于正在发生的事情的提示。 我有一个大型数据框,其中包含从某些城市进口的国家/地区。对于某些国家/地区,我有 2 个条目。我想总结每个城市的进口量,并为每个
客户提出需求,针对某一列分组加上小计,合计汇总。网上找了一些有关SQL加合计的语句。都不是很理想。决定自己动手写。 思路有三个: 1.很多用GROUPPING和ROLLUP来实现。 优
想要制作一个看起来像这样的网格,其中 div/section 以百分比表示。 margin 在任何地方都是一样的。 http://www.ladda-upp.se/bilder/giefekcmgwm
我是一名优秀的程序员,十分优秀!