【问题标题】：Javascript; html form; user input; display inputJavascript； html表单；用户输入；显示输入
【发布时间】：2019-04-26 22:26:59
【问题描述】：

我不明白为什么这段代码不会显示用户输入的信息。我需要让用户从 html 表单中输入信息，将此信息添加到数组中，然后显示信息（实际上，需要做的不止于此，但无法超越这一点）。我需要输入的信息显示在页面上。谢谢

<!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>

【问题讨论】：

why is simple javascript code not running?的可能重复

标签： javascript arrays

【解决方案1】：

我尝试运行代码。我遇到了类似的错误

test.html:23 Uncaught ReferenceError: fName is not defined

您可以通过在函数内移动变量声明来解决此问题。

//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/>";
}

原因是初始声明发生时元素不存在。

【讨论】：

:) 总是乐于帮助@Axania

【解决方案2】：

将脚本移到正文下方

主要问题是 Javascript 在 HTML 之前加载。结果，当 Javascript 尝试查找元素为“firstName”的元素时，由于尚未加载，因此无法找到。

要解决此问题，您应该将 script 标签移到 body 标签下方，以便在 Javascript 访问 HTML 之前加载 HTML。

作为一个额外的好处，它缩短了页面加载时间，因为浏览器在呈现 HTML 之前不必等待 JavaScript 加载

示例代码：

<!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>

【讨论】：