Javascript； html表单；用户输入；显示输入

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 标记下方，以便在 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>

Javascript； html表单；用户输入；显示输入

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-11-24 19:11:05

解决方案2
1 2018-11-24 19:29:27

将脚本移到正文下方

Javascript； html表单； 用户输入； 显示输入

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-11-24 19:11:05

解决方案2 1 2018-11-24 19:29:27

将脚本移到正文下方

Javascript； html表单；用户输入；显示输入

解决方案1
1 已采纳 2018-11-24 19:11:05

解决方案2
1 2018-11-24 19:29:27