javascript - 将用户输入添加到数组中并在单击时显示

Question

我开始学习 Javascript 教程，但遇到了一个小问题。我对下一步该做什么感到很困惑，希望得到指导。我正在尝试将数据添加到数组中并将其显示到 html 表单上的表格上，但我不太确定该怎么做。以下是我的代码和迄今为止的尝试。我对JS了解很少，只了解HTML和PHP。建议就好了!

jsFiddle

        document.getElementById("submitEntry").onclick = function() {
          var errorMessage = "";


          var fName = document.getElementById("fName").value;
          var midTerm = document.getElementById("midTerm").value;
          var homeWork = document.getElementById("homeWork").value;
          var finalExam = document.getElementById("finalExam").value;
          var classAttendance = document.getElementById("classAttendance").value;

          if (fName === "")
            errorMessage += "\tFirst name is empty.\n";
          var lName = document.getElementById("lName").value;

          if (lName === "")
            errorMessage += "\tLast name is empty.\n";

          if (midTerm === "")
            errorMessage += "\tMidterm is empty.\n";
          if (isNaN(midTerm))
            errorMessage += "\tMidterm does not have valid value.\n";
          if (midTerm < 0 || midTerm > 100)
            errorMessage += "\tMidterm value out of range.\n";



          if (homeWork === "")
            errorMessage += "\tHomework is empty.\n";
          if (isNaN(homeWork))
            errorMessage += "\tHomework does not have valid value.\n";
          if (homeWork < 0 || homeWork > 100)
            errorMessage += "\tHomework value out of range.\n";



          if (finalExam === "")
            errorMessage += "\tExam is empty.\n";
          if (isNaN(finalExam))
            errorMessage += "\tExam does not have valid value.\n";
          if (finalExam < 0 || finalExam > 100)
            errorMessage += "\tExam value out of range.\n";



          if (classAttendance === "")
            errorMessage += "\tAttendance is empty.\n";
          if (isNaN(classAttendance))
            errorMessage += "\tAttendance does not have valid value.\n";
          if (classAttendance < 0 || classAttendance > 100)
            errorMessage += "\tAttendance value out of range.\n";

          if (errorMessage === "") {
            finalGrades(midTerm, finalExam, homeWork, classAttendance, fName, lName);
            window.alert("Student added");
          } else
            window.alert("Please correct the following error first:\n" + errorMessage);
        };

        document.getElementById("showScores").onclick = function() {
          if (finalGrades.studentsInfos === undefined)
            return;

          var table = document.getElementById("showScoreResult");
          while (table.rows.length > 1) {
            table.deleteRow(table.rows.length - 1);
          }


          for (var i = 0; i < finalGrades.studentsInfos.length; i++) {
            var row = table.insertRow(i);
            for (var a = 0; a < array.length; a++) {
              document.writeln(array[a]);
              var cell = row.insertCell(a);
              var cell_Name = row.insertCell(a);
              var cell_Midterm = row.insertCell(a);
              var cell_Homework = row.insertCell(a);
              var cell_Exam = row.insertCell(a);
              var cell_Attendance = row.insertCell(a);
              var cell_Score = row.insertCell(a);
              var cell_LetterGrade = row.insertCell(a);
              cell_Name.innerHTML = finalGrades.studentsInfos[a]["name"];
              cell_Midterm.innerHTML = finalGrades.studentsInfos[a]["midTerm"];
              cell_Homework.innerHTML = finalGrades.studentsInfos[a]["homeWork"];
              cell_Exam.innerHTML = finalGrades.studentsInfos[a]["eXam"];
              cell_Attendance.innerHTML = finalGrades.studentsInfos[a]["attendance"];
              cell_Score.innerHTML = finalGrades.studentsInfos[a]["finalScore"];
              cell_LetterGrade.innerHTML = finalGrades.studentsInfos[a]["letterScore"];
            }
          }
          document.body.appendChild("#showScoreResult table");
        };

        document.getElementById("overallAverage").onclick = function() {
          if (finalGrades.studentsInfos === undefined) {
            window.alert("There are no students in the list yet\n");
            return;
          }

          var allScores = [];
          for (var i = 0; i < finalGrades.studentsInfos.length; i++) {
            allScores.push(finalGrades.studentsInfos[i]["finalScore"]);
          }

          window.alert("Among " + allScores.length + " student(s),\n\tthe overall average score is " + getAve(allScores) + "\n\tthe highest score is " + getMax(allScores) + "\n\tthe lowest score is " + getMin(allScores));


        };

        document.getElementById("reSet").onclick = reSet;

        var name1 = document.getElementById("fName").value;
        var name2 = document.getElementById("lName").value;
        var midterm = document.getElementById("midTerm").value;
        var homework = document.getElementById("homeWork").value;
        var finalexam = document.getElementById("finalExam").value;
        var classattendance = document.getElementById("classAttendance").value;

        var array = [];
        array.push(name1, name2, midterm, homework, finalexam, classattendance);

        function reSet() {
          document.getElementById("fName").value = "";
          document.getElementById("lName").value = "";
          document.getElementById("midTerm").value = "";
          document.getElementById("homeWork").value = "";
          document.getElementById("finalExam").value = "";
          document.getElementById("classAttendance").value = "";
        };

        function getLetterGrade(finalGrade) {

          var letterGrade = "F";

          if (finalGrade >= 80)
            letterGrade = "A";
          else if (finalGrade >= 70)
            letterGrade = "B";
          else if (finalGrade >= 60)
            letterGrade = "C";
          else if (finalGrade >= 50)
            letterGrade = "D";

          return letterGrade;
        };


        function finalGrades(midtermValue, finalexamValue, homeworkValue, attendanceValue, fName, lName) {

          var finalGrade = midtermValue * 0.3 + finalexamValue * 0.4 + homeworkValue * 0.2 + attendanceValue * 0.1;
          var letterGrade = getLetterGrade(finalGrade);

          finalGrades.count = ++finalGrades.count || 1;

          var oneStudentInfos = {
            name: fName + " " + lName,
            midTerm: midtermValue,
            eXam: finalexamValue,
            homeWork: homeworkValue,
            attendance: attendanceValue,
            finalScore: finalGrade,
            letterScore: letterGrade
          };

          if (finalGrades.studentsInfos === undefined)
            finalGrades.studentsInfos = [];
          finalGrades.studentsInfos.push(oneStudentInfos);


          document.getElementById("studentCount").innerHTML = "Student number" + (finalGrades.count + 1);
        };

        function getAve(Aray) {

          var count = Aray.length;
          var sum = 0.0;
          for (var i = 0; i < count; i++) {
            sum += Aray[i];
          }

          return sum / count;
        };

        function getMax(Aray) {

          var max = Aray[0];
          for (var i = 1; i < Aray.length; i++) {
            max = max < Aray[i] ? Aray[i] : max;
          }

          return max;
        };

        function getMin(Aray) {

          var min = Aray[0];
          for (var i = 1; i < Aray.length; i++) {
            min = min > Aray[i] ? Aray[i] : min;
          }

          return min;
        };

body {
  background: white;
  background: url("blackboard.jpg");
  background-size: 1280px 590px;
  background-repeat: no-repeat
}

<h1 style="margin-top: 50px ; color: white" align="center">Advanced Grade Tabulator</h1>
<p id="studentCount" style="color: white; margin-left: 700px">You have not recorded any student yet</p>


<body>
  <table id="showScoreResult" align="right" style="border:5px solid black; color:rgb(0, 0, 0); text-align:center; margin-right: 60px">
    <tr>
      <th style="border: 1px solid black; width: 100px; color:white">Student name</th>
      <th style="border: 1px solid black; width: 100px; color:white">Midterm</th>
      <th style="border: 1px solid black; width: 100px; color:white">Homework</th>
      <th style="border: 1px solid black; width: 100px; color:white">Exam</th>
      <th style="border: 1px solid black; width: 100px; color:white">Attendance</th>
      <th style="border: 1px solid black; width: 100px; color:white">Score</th>
      <th style="border: 1px solid black; width: 100px; color:white">Letter grade</th>
    </tr>
  </table>

  <table style="color: white; margin-left: 100px ">
    <tr>
      <td>First Name:</td>
      <td>
        <input type="text" id="fName" />
      </td>
    </tr>
    <tr>
      <td>Last Name:</td>
      <td>
        <input type="text" id="lName" />
      </td>
    </tr>
    <tr>
      <td>Midterm:</td>
      <td>
        <input type="text" id="midTerm" />
      </td>
    </tr>
    <tr>
      <td>Homework:</td>
      <td>
        <input type="text" id="homeWork" />
      </td>
    </tr>
    <tr>
      <td>Exam:</td>
      <td>
        <input type="text" id="finalExam" />
      </td>
    </tr>
    <tr>
      <td>Attendance:</td>
      <td>
        <input type="text" id="classAttendance" />
      </td>
    </tr>
  </table>

  <table style="float:left ; margin-left: 60px ">
    <td>
      <button id="submitEntry">Submit Entry</button>
    </td>
    <td>
      <button id="showScores">Show Scores</button>
    </td>
    <td>
      <button id="overallAverage">Overall Average</button>
    </td>
    <td>
      <button id="reSet">Reset</button>
    </td>
  </table>

Answer 1

我没有费心标记，它的功能有限，但应该让您知道如何从那里继续: https://jsfiddle.net/u5tujmh4/

您可能会注意到，我创建了两个数组。这不是必需的，但旨在为您提供两种替代方法(它们改变您“导航”数据的方式)。

保存值

变量myArrayArray和myObjectArray是我们用用户输入填充的数组。不同之处在于我们保存用户输入的方式:

在myArrayArray中，用户输入被保存为数组

tempArray = [field1.value, field2.value, field3.value, field4.value];
myArrayArray.push(tempArray);

对于myObjectArray，我们将用户输入保存为带有键值对的对象

tempObject = {
    "field1":field1.value,
    "field2":field2.value,
    "field3":field3.value,
    "field4":field4.value
  };
myObjectArray.push(tempObject);

在这两种情况下，我们都将数据推送到现有数组中。

检索值

您可能已经注意到，myArrayArray 只是一个多维数组。在我们的例子中，它看起来像这样(将 row 和 column 表示数组索引 - 从 0 开始):

myArrayArray[row][column]

myObjectArray 是一个充满对象的数组，因此可以通过两种方式“导航”:

myObjectArray[row]["fieldname"]
// or
myObjectArray[row].fieldname

结论

第一种方法 (myArrayArray) 更容易循环，第二种方法 (myObjectArray) 更容易阅读。