我正在尝试显示包含5个项目的复选框。当用户点击这些项目并点击提交时，将显示包含税率的总计。我的问题是提交框似乎不起作用。
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition v 1.16
Filename: page 2.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0">
<title>Hedgie Heroes: Shop</title>
<link rel="stylesheet" media="screen and (max-device-width: 999px)" href="projhand.css" />
<link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="project.css" />
<link href="https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css">
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>
<img src="https://cdn.gomix.com/d593761a-2c9a-4565-9104-09aad9e28c12%2FHedgehog.png" width="200" />
</h1>
</header>
<nav>
<ul>
<!--
Reminder:Add new page by first creating the html file.
Then adjust the id and href below to allow correct navigation.
-->
<li><a href="/index.html">Home</a></li>
<li id="currentpage"><a href="#">Products</a></li>
<li id="page3"><a href="page3.html">Hedgehog Care</a></li>
<li id="page4"><a href="page4.html">About Us</a></li> </ul>
</nav>
<article>
<h2>The Starter Kit Necessities!</h2>
<br>
<p>The options below is a list of recommended supplies for your Hedgehog! All supplies come with free treats and the opportunity to sign up for the Hedgie Club!</p>
<br>
<!--
Everything below is for the products listed.
<br> is implemented for page design and line breaks.
-->
<form>
<input type="checkbox" id="item1" value="24.00" />
<label for="item1">Silent Running Wheel ($24.00)</label>
<br>
<input type="checkbox" id="item2" value="8.00" />
<label for="item2">Food and Water Dish ($8.00)</label>
<br>
<input type="checkbox" id="item3" value="12.00" />
<label for="item3">Snuggle Sack ($12.00)</label>
<br>
<input type="checkbox" id="item4" value="10.00" />
<label for="item4">Hedgehog Food ($10.00)</label>
<br>
<input type="checkbox" id="item5" value="13.00" />
<label for="item5">Igloo ($13.00)</label>
<br>
<input type="button" value="Submit" id="sButton" />
</form>
<br> <br> <br> <br>
<p> **Note** All colored products are gender neutral. </p>
</article>
function calcTotal()
{
var itemTotal = 0;
var salesTaxRate = .06; //stores the curent sales tax
var items = document.getElementByTagName("input");
for(var i=0; i<5; i++) {
if(items[i].checked) {
itemTotal += (items[i].value * 1);
}
}
itemTotal *= 1+ salesTaxRate; //notice the use of the compound operator here
document.getElementById("total").innerHTML = "Your order total is $" + itemTotal.toFixed(2);
}
//add backward compatible event listener to Submit button
var submitButton = document.getElementById ("sButton");
if(submitButton.addEventListener) {
submitButton.addEventListener("click", calcTotal, false);
} else if (submitButton.attachEvent) {
submitButton.attatchEvent("onclick", calcTotal)
}
</script>
<footer>
<p>Hedgie Heroes • Salisbury, Maryland</p>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
您可以使用onclick事件，如下所示
<input type="button" value="Submit" id="sButton" onclick="calcTotal()" />
调用js函数 calcTotal（）
答案 1 :(得分：0)
有两个问题
通过＆＃34; addEventListener＆＃34;添加提交事件也更好。而不是＆＃34; onclick＆＃34;因为这样可以避免潜在的CSRF攻击。
答案 2 :(得分：0)
我确实在这里重现了此问题，并已解决。它的工作方式如下：
Hedgie英雄：商店 <header>
<h1>
<img src="1.png" width="200" />
</h1>
</header>
<nav>
<ul>
<!--
Reminder:Add new page by first creating the html file.
Then adjust the id and href below to allow correct navigation.
-->
<li><a href="index.html">Home</a></li>
<li id="currentpage"><a href="#">Products</a></li>
<li id="page3"><a href="page3.html">Hedgehog Care</a></li>
<li id="page4"><a href="page4.html">About Us</a></li> </ul>
</nav>
<article>
<h2>The Starter Kit Necessities!</h2>
<br>
<p>The options below is a list of recommended supplies for your Hedgehog! All
供应带有免费零食，并有机会注册Hedgie Club！
<br>
<!--
Everything below is for the products listed.
<br> is implemented for page design and line breaks.
-->
<form>
<input type="checkbox" id="item1" value="24.00" />
<label for="item1">Silent Running Wheel ($24.00)</label>
<br>
<input type="checkbox" id="item2" value="8.00" />
<label for="item2">Food and Water Dish ($8.00)</label>
<br>
<input type="checkbox" id="item3" value="12.00" />
<label for="item3">Snuggle Sack ($12.00)</label>
<br>
<input type="checkbox" id="item4" value="10.00" />
<label for="item4">Hedgehog Food ($10.00)</label>
<br>
<input type="checkbox" id="item5" value="13.00" />
<label for="item5">Igloo ($13.00)</label>
<br>
<input type="button" value="Submit" id="sButton" onclick="calcTotal()" />
<div id="total">total </div>
</form>
</article>
<script>
function calcTotal()
{
var itemTotal = 0;
var salesTaxRate = .06; //stores the curent sales tax
var items = document.getElementsByTagName("input");
for (var i = 0; i < 5; i++) {
if(items[i].checked) {
itemTotal += (items[i].value * 1)
}
}
itemTotal *= 1+ salesTaxRate; //notice the use of the compound operator here
document.getElementById("total").innerHTML = "Your order total is $" +
itemTotal.toFixed（2）;
}
//add backward compatible event listener to Submit button
var submitButton = document.getElementById ("sButton");
if(submitButton.addEventListener) {
submitButton.addEventListener("click", calcTotal, false);
} else if (submitButton.attachEvent) {
submitButton.attatchEvent("onclick", calcTotal)
}