in the following javascript code follow the directions below and insertthe code
ID: 3859476 • Letter: I
Question
in the following javascript code follow the directions below and insertthe code
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 3
Hands-on Project 3-1
Author:
Date:
Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 3-1</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 3-1
</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="button" value="Submit" id="sButton" />
</form>
<div>
<p id="total"></p>
</div>
</article>
</body>
</html>
1.At the bottom of the document, before the closing tag, enter to create a new script section.
2.Within the script section you created in the previous step, enter the following function:
// function to add values of selected check boxes and display total
display total
function calcTotal() {
}
3. Within the function braces, define the following global variables
var itemTotal = 0;
var items = document.getElementsByTagName("input");
4. Below the global variables, enter the following for st
for (var i = 0; i < 5; i++) {
if (items[i].checked) {
itemTotal += (items[i].value * 1);
}
}
5.Below the closing } for the for statement, enter the following statement to write the result to the web document
document.getElementById("total").innerHTML = "Your order total is $" + itemTotal + ".00";
6. Below the closing } for the function, enter the following code to create an event listener that’s compatible with older versions of Internet Explorer:
// 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.attachEvent("onclick", calcTotal); }
}
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 3
Hands-on Project 3-1
Author: Thomas Taylor
Date: February 3, 2017
Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 3-1</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 3-1
</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="button" value="Submit" id="sButton" />
</form>
<div>
<p id="total"></p>
</div>
</article>
<script>
// function to add values of selected check boxes and display total
function calcTotal(){
var itemTotal = 0;
var items = document.getElementsByTagName("input");
for (var i = 0; i < 5; i++) {
if (items[i].checked) {
itemTotal += (items[i].value * 1);
}
}
document.getElementById("total").innerHTML = "Your order total is $"
+ itemTotal + ".00";
}
var submitButton = document.getElementById("sButton");
if(submitButton.addEventListener) {
submitButton.addEventListener("click", calcTotal, false);
} else if (submitButton.attachEvent) {
submitButton.attachEvent("onclick", calcTotal);
}
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.