Javascript; html form; user input; display input
Question
I can't figure out why this code won't display the user entered information. I need to have user enter information from the html form, add this info to the arrays, and then display the info (actually, need to do more than this, but can't get past this point). I need the entered information to display on the page. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homework 10</title>
<script type="text/javascript">
//Variables for arrays
var fName = [];
var lName = [];
var tScore = [];
//Variables from user input
var fNameInput = document.getElementById("firstName");
var lNameInput = document.getElementById("lastName");
var tScoreInput = document.getElementById("testScore");
//Variable for display
var display = document.getElementById("display");
//Function to add user info to arrays
function insert() {
fName.push(fNameInput.value);
lName.push(lNameInput.value);
tScore.push(tScoreInput.value);
clearAndShow();
}
//Function to display info entered from array
function clearAndShow() {
fNameInput.value = "";
lNameInput.value = "";
tScoreInput.value = "";
display.innerHTML = "";
display.innerHTML += "First Name: " + fName.join(", ") + "<br/>";
display.innerHTML += "LastName: " + lName.join(", ") + "<br/>";
display.innerHTML += "Test Score: " + tScore.join(", ") + "<br/>";
}
</script>
</head>
<body bgcolor="Cornsilk">
<h2>Average Student Scores</h2>
<form>
<fieldset>
<legend><strong>Enter First, Last Name and Test Score:</strong></legend><br />
<input type="text" id="firstName" placeholder="First name"/><p />
<input type="text" id="lastName" placeholder="Last name"/><p />
<input type="number" id="testScore" placeholder="Test Score"/><p />
<input type="button" value="Save/Show Average" onclick="insert()"/><p />
</fieldset><p />
</form>
<div id="display"></div>
</body>
</html>
2 answers
solution1
1 ACCPTED 2018-11-24 19:11:05
I tried to run the code. I got an error like
test.html:23 Uncaught ReferenceError: fName is not defined
You can solve this by moving the variable declaration inside the function.
//Variables for arrays
var fName = [];
var lName = [];
var tScore = [];
//Function to add user info to arrays
function insert() {
var fNameInput = document.getElementById("firstName");
var lNameInput = document.getElementById("lastName");
var tScoreInput = document.getElementById("testScore");
fName.push(fNameInput.value);
lName.push(lNameInput.value);
tScore.push(tScoreInput.value);
clearAndShow();
}
//Function to display info entered from array
function clearAndShow() {
var display = document.getElementById("display");
var fNameInput = document.getElementById("firstName");
var lNameInput = document.getElementById("lastName");
var tScoreInput = document.getElementById("testScore");
fNameInput.value = "";
lNameInput.value = "";
tScoreInput.value = "";
display.innerHTML = "";
display.innerHTML += "First Name: " + fName.join(", ") + "<br/>";
display.innerHTML += "LastName: " + lName.join(", ") + "<br/>";
display.innerHTML += "Test Score: " + tScore.join(", ") + "<br/>";
}
The reason for this is the element is no there when the initial declaration is happening.
solution2
1 2018-11-24 19:29:27
Move the script below the body
The main issue is that the Javascript is loaded before the HTML. As a result, when the Javascript attempts to find the element with the element "firstName", it fails to find it because it hasn't been loaded yet.
To fix this, you should move the script tag below the body tag so that the HTML is loaded before it is accessed by the Javascript.
As an added bonus, it improves page load time as the browser doesn't have to wait for the JavaScript to load before rendering the HTML
Example Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Homework 10</title> </head> <body bgcolor="Cornsilk"> <h2>Average Student Scores</h2> <form> <fieldset> <legend><strong>Enter First, Last Name and Test Score:</strong></legend><br /> <input type="text" id="firstName" placeholder="First name"/><p /> <input type="text" id="lastName" placeholder="Last name"/><p /> <input type="number" id="testScore" placeholder="Test Score"/><p /> <input type="button" value="Save/Show Average" onclick="insert()"/><p /> </fieldset><p /> </form> <div id="display"></div> </body> <script type="text/javascript"> //Variables for arrays var fName = []; var lName = []; var tScore = []; //Variables from user input var fNameInput = document.getElementById("firstName"); var lNameInput = document.getElementById("lastName"); var tScoreInput = document.getElementById("testScore"); //Variable for display var display = document.getElementById("display"); //Function to add user info to arrays function insert() { fName.push(fNameInput.value); lName.push(lNameInput.value); tScore.push(tScoreInput.value); clearAndShow(); } //Function to display info entered from array function clearAndShow() { fNameInput.value = ""; lNameInput.value = ""; tScoreInput.value = ""; display.innerHTML = ""; display.innerHTML += "First Name: " + fName.join(", ") + "<br/>"; display.innerHTML += "Last Name: " + lName.join(", ") + "<br/>"; display.innerHTML += "Test Score: " + tScore.join(", ") + "<br/>"; } </script> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.