Adding user input into array and displaying on click

Question

I am starting to work on Javascript tutorials and I have came upon a slight issue. Im quite confused as to what to do next and guidance would be appreciated. I am trying to add data into a array and display it out onto a table on the html form but Im not quite sure how to do so. Below is my codes and the attempts so far. I have very little knowledge on JS, only on HTML and PHP. Advise would be nice!

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>

HTML tags don't belong inside <head> that's what the <body> is for. — empiric
– empiric, Commented Feb 4, 2016 at 12:47

Ivan Modric · Accepted Answer · 2016-02-04 14:47:37Z

1

I didn't bother with markup and it has limited functionality but should give you an idea how to go on from there: https://jsfiddle.net/u5tujmh4/

As you may notice I create two arrays. That is not necessary but meant to give you two alternative approaches (they change the way you can "navigate" the data).

SAVING THE VALUES

The variables myArrayArray and myObjectArray are the arrays we fill with the user input. The difference is the way we save the user input:

In myArrayArray the user input is saved as an array

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

For myObjectArray we save the user input as an object with key-value pairs

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

In both cases we push the data to the existing array.

RETRIEVING THE VALUES

As you may have noticed myArrayArray is just a multidimensional array. In our case it looks something like this (witch both row and column representing an array index - starting from 0):

myArrayArray[row][column]

myObjectArray is an array filled with objects so it can be "navigated" two ways:

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

CONCLUSION

The first approach (myArrayArray) is easier to loop, the second one (myObjectArray) is easier to read.

answered Feb 4, 2016 at 14:47

Ivan Modric

6196 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Junxiang Bai Over a year ago

Thank you for your guidance, this has certainly been helpful to clearing my doubts!

Collectives™ on Stack Overflow

Adding user input into array and displaying on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related