将脚本移到正文下方

Question

我不知道为什么此代码不会显示用户输入的信息。我需要让用户从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>

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

这是因为初始声明发生时该元素不存在。

Answer 2

将脚本移到正文下方

主要问题是Javascript在HTML之前加载。结果，当Javascript尝试查找带有元素“ firstName”的元素时，由于找不到该元素而未能找到它。

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

作为一项额外的好处，由于浏览器无需等待Javascript加载就可以呈现HTML，从而增加了页面加载时间

示例代码：

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

Javascript; html表格;用户输入；显示输入

2 个答案:

将脚本移到正文下方