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>

Possible duplicate of why is simple javascript code not running? — Heretic Monkey
– Heretic Monkey, Commented Nov 24, 2018 at 19:04

Rino Raj · Accepted Answer · 2018-11-24 19:31:42Z

1

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.

edited Nov 24, 2018 at 19:31

answered Nov 24, 2018 at 19:11

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rino Raj Over a year ago

:) Always glad to help @Axania

AlpacaFur · Accepted Answer · 2021-01-12 14:07:01Z

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>

Collectives™ on Stack Overflow

Javascript; html form; user input; display input

2 Answers 2

1 Comment

Move the script below the body

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Move the script below the body

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related