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