In: Computer Science
JavaScript
Use the browser tools to identify the lines missing var keywords, add the keywords in your text editor.
<html>
<body>
<header>
<h1>
Hands-on Project 4-3
</h1>
</header>
<article>
<div id="results">
<p id="resultsExpl"></p>
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
</div>
<form>
<fieldset>
<label for="placeBox" id="placeLabel">
Type the name of a place, then click Submit:
</label>
<input type="text" id="placeBox" />
</fieldset>
<fieldset>
<button type="button" id="button">Submit</button>
</fieldset>
</form>
</article>
<script>
var places = []; // new array to store entered places
var i = 1; // counter variable to track array indexes
// function to add input to array and then generate list after 5th submission
function processInput() {
"use strict";
places[i] = document.getElementById("placeBox").value; // add entered value to array
document.getElementById("placeBox").value = "" // clear text box
if (i < 5) { // iterate counter variable
i++;
}
else { // add entered value to array and write results to document
document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
listItem = "";
for (j = 1; j < 6; j++) { // write each array element to its corresponding list item
listItem = "item" + j;
document.getElementById(listItem).innerHTML = places[j];
}
}
// add backward compatible event listener to Submit button
}
/* this listener should be out of processInput() function*/
var submitButton = document.getElementById("button");
if (submitButton.addEventListener) {
submitButton.addEventListener("click", processInput, false);
} else if (submitButton.attachEvent) {
submitButton.attachEvent("onclick", processInput);
}
</script>
</body>
</html>
Here, you have two variables without any declaration.
they are:
Replace them like..
NOW Your code is good.!!!
var places = []; // new array to store entered places
var i = 1; // counter variable to track array indexes
// function to add input to array and then generate list after 5th submission
function processInput() {
"use strict";
places[i] = document.getElementById("placeBox").value; // add entered value to array
document.getElementById("placeBox").value = "" // clear text box
if (i < 5) { // iterate counter variable
i++;
}
else { // add entered value to array and write results to document
document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
var listItem = "";
for (var j = 1; j < 6; j++) { // write each array element to its corresponding list item
listItem = "item" + j;
document.getElementById(listItem).innerHTML = places[j];
}
}
// add backward compatible event listener to Submit button
}
/* this listener should be out of processInput() function*/
var submitButton = document.getElementById("button");
if (submitButton.addEventListener) {
submitButton.addEventListener("click", processInput, false);
} else if (submitButton.attachEvent) {
submitButton.attachEvent("onclick", processInput);
}
======================