Menu
Hello is this where I post JavaScript questions? I am working on a site that displays 5 check boxes for prices. I made a function to add the total of the check boxes and display the results via a message box. The problem is the message box is not showing when I load the page and I don’t understand why??
index.htm code with the function:
[code]
<!DOCTYPE html>
<html>
<head>
<!–
JavaScript 6th Edition
Chapter 2
Hands-on Project 2-4
Author: Jon Mackey
Date: 2/1/2015
Filename: index.htm
–>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<title>Hands-on Project 2-4</title>
<link rel=”stylesheet” href=”styles.css” />
<script src=”modernizr.custom.05819.js”></script>
</head>
<body>
<header>
<h1>
Hands-on Project 2-4
</h1>
</header>
<article>
<h2>Lunch selections</h2>
<form>
<input type=”checkbox” id=”item1″ value=”8″ />
<label for=”item1″>Fried chicken ($8.00)</label>
<input type=”checkbox” id=”item2″ value=”10″ />
<label for=”item2″>Fried halibut ($10.00)</label>
<input type=”checkbox” id=”item3″ value=”8″ />
<label for=”item3″>Hamburger ($8.00)</label>
<input type=”checkbox” id=”item4″ value=”13″ />
<label for=”item4″>Grilled salmon ($13.00)</label>
<input type=”checkbox” id=”item5″ value=”6″ />
<label for=”item5″>Side salad ($6.00)</label>
<input type=”submit” value=”submit” />
</form>
</article>
<script>
function calcTotal() {
var itemTotal = 0;
var item1 = document.getElementById(“item1”);
var item2 = document.getElementById(“item2”);
var item3 = document.getElementById(“item3”);
var item4 = document.getElementById(“item4”);
var item5 = document.getElementById(“item5”);
(item1.checked) ? (itemTotal += 8) : (itemTotal += 0);
(item2.checked) ? (itemTotal += 9) : (itemTotal += 0);
(item3.checked) ? (itemTotal += 8) : (itemTotal += 0);
(item4.checked) ? (itemTotal += 13) : (itemTotal += 0);
(item5.checked) ? (itemTotal += 6) : (itemTotal += 0);
var salesTaxRate = 0.07;
var orderTotal = itemTotal + (itemTotal * salesTaxRate);
alert(“Your order total is $” + orderTotal);
}
document.getElementById(“click”).addEventListener(“click”, calcTotal, false);
</script>
</body>
</html>