CODEWITHSUNDEEP
javascriptarrays
Axania
Axania

Reputation: 23

Javascript; html form; user input; display input

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>

Upvotes: 2

Views: 934

Answers (2)

AlpacaFur
AlpacaFur

Reputation: 192

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>

Upvotes: 1

Rino Raj
Rino Raj

Reputation: 6264

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.

Upvotes: 1

Related Questions