Javascript；html格式；用户输入；显示输入_Javascript_Arrays

Javascript；html格式；用户输入；显示输入

javascript arrays

Javascript；html格式；用户输入；显示输入,javascript,arrays,Javascript,Arrays,我不明白为什么这段代码不显示用户输入的信息。我需要让用户从html表单中输入信息，将这些信息添加到数组中，然后显示这些信息（实际上，需要做的不仅仅是这些，但不能超过这一点）。我需要输入的信息显示在页面上。谢谢 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Homework 10</title> <script type="text/javascr

我不明白为什么这段代码不显示用户输入的信息。我需要让用户从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>


作业10
//数组的变量
var fName=[]；
var lName=[]；
var tScore=[]；
//来自用户输入的变量
var fNameInput=document.getElementById（“firstName”）；
var lNameInput=document.getElementById（“lastName”）；
var tScoreInput=document.getElementById（“testScore”）；
//显示变量
var display=document.getElementById（“display”）；
//函数将用户信息添加到数组中
函数插入（）{
fName.push（fNameInput.value）；
lName.push（lNameInput.value）；
tScore.push（tScoreInput.value）；
clearAndShow（）；
}
//用于显示从阵列输入的信息的函数
函数clearAndShow（）{
fNameInput.value=“”；
lNameInput.value=“”；
tScoreInput.value=“”；
display.innerHTML=“”；
display.innerHTML+=“名字：”+fName.join（“，”+”）“
”；
display.innerHTML+=“LastName:”+lName.join（“，”+”）“
”；
display.innerHTML+=“测试分数：”+tScore.join（“，”）+“
”；
}
学生平均成绩
输入名字、姓氏和考试分数：

我试图运行代码。我犯了一个错误，比如

test.html:23未捕获引用错误：未定义fName

您可以通过在函数中移动变量声明来解决这个问题

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

//数组的变量
var fName=[]；
var lName=[]；
var tScore=[]；
//函数将用户信息添加到数组中
函数插入（）{
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（）；
}
//用于显示从阵列输入的信息的函数
函数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+=“名字：”+fName.join（“，”+”）“
”；
display.innerHTML+=“LastName:”+lName.join（“，”+”）“
”；
display.innerHTML+=“测试分数：”+tScore.join（“，”）+“
”；
}

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

将脚本移到正文下方主要问题是Javascript是在HTML之前加载的。结果，当Javascript试图找到元素“firstName”的元素时，它找不到它，因为它还没有被加载

要解决这个问题，您应该将脚本标记移到body标记下面，以便在Javascript访问HTML之前加载HTML

另外，它还提高了页面加载时间，因为浏览器不必在呈现HTML之前等待JavaScript加载

示例代码：


作业10
学生平均成绩
输入名字、姓氏和考试分数：






//数组的变量
var fName=[]；
var lName=[]；
var tScore=[]；
//来自用户输入的变量
var fNameInput=document.getElementById（“firstName”）；
var lNameInput=document.getElementById（“lastName”）；
var tScoreInput=document.getElementById（“testScore”）；
//显示变量
var display=document.getElementById（“display”）；
//函数将用户信息添加到数组中
函数插入（）{
fName.push（fNameInput.value）；
lName.push（lNameInput.value）；
tScore.push（tScoreInput.value）；
clearAndShow（）；
}
//用于显示从阵列输入的信息的函数
函数clearAndShow（）{
fNameInput.value=“”；
lNameInput.value=“”；
tScoreInput.value=“”；
display.innerHTML=“”；
display.innerHTML+=“名字：”+fName.join（“，”+”）“
”；
display.innerHTML+=“姓氏：”+lName.join（“，”+”）“
”；
display.innerHTML+=“测试分数：”+tScore.join（“，”）+“
”；
}

可能重复的

：）

总是乐于帮助@Axania