Student Object Program Errors-CodePudding

I have a program that is suppose to ask the user for their ID, First Name, Last Name, select a Rank (grade level), and the GPA. After all fields go through error checking, the data should then be put into an object called student. Next the student object should be pushed to the Summary Array. Displaying the first and last name, next line ID, next line Class Rank, next line GPA.

UPDATE CURRENTLY: all error checking (if/elses) works! Secondly, only the "--------" happens when Add Student is pressed besides the error checking.

Full Code:

var studentList = []
var studentID;
var studentFirst;
var studentLast;
var Rank;
var studentGPA;
var Summary = [];
studentID = document.querySelector("#Text1");
studentFirst = document.querySelector("#Text2");
studentLast = document.querySelector("#Text3");
Rank = document.querySelector("#Select1");
studentGPA = document.querySelector("#Text4");

function AddListeners() {

  studentID.addEventListener("mouseenter", ChangeColor1);
  studentID.addEventListener("mouseleave", ChangeColorBack1);
  studentFirst.addEventListener("mouseenter", ChangeColor2);
  studentFirst.addEventListener("mouseleave", ChangeColorBack2);
  studentLast.addEventListener("mouseenter", ChangeColor3);
  studentLast.addEventListener("mouseleave", ChangeColorBack3);
  Rank.addEventListener("mouseenter", ChangeColor4);
  Rank.addEventListener("mouseleave", ChangeColorBack4);
  studentGPA.addEventListener("mouseenter", ChangeColor5);
  studentGPA.addEventListener("mouseleave", ChangeColorBack5);
  studentGPA.addEventListener("keypress", ShowKey);
}

function ChangeColor1() {
  studentID.style.backgroundColor = "yellow";
}

function ChangeColorBack1() {
  studentID.style.backgroundColor = "";
}

function ChangeColor2() {
  studentFirst.style.backgroundColor = "yellow";
}

function ChangeColorBack2() {
  studentFirst.style.backgroundColor = "";
}

function ChangeColor3() {
  studentLast.style.backgroundColor = "yellow";
}

function ChangeColorBack3() {
  studentLast.style.backgroundColor = "";
}

function ChangeColor4() {
  Rank.style.backgroundColor = "yellow";
}

function ChangeColorBack4() {
  Rank.style.backgroundColor = "";
}

function ChangeColor5() {
  studentGPA.style.backgroundColor = "yellow";
}

function ChangeColorBack5() {
  studentGPA.style.backgroundColor = "";
}

function ShowKey(e) {
  if ((e.charCode < 48 || e.charCode > 57) && e.charCode != 46) {
    e.preventDefault();
  }
}

function Create() {
  studentID = document.getElementById('Text1').value;
  studentFirst = document.getElementById('Text2').value;
  studentLast = document.getElementById('Text3').value;
  Rank = document.getElementById('Select1').value;
  studentGPA = document.getElementById('Text4').value;


  if (!studentList.includes(studentID)) {
    if (studentID != '') {
      if (studentFirst != '') {
        if (studentLast != '') {
          if (Rank != -1) {
            if (studentGPA != '') {
              if (studentGPA > 0 && studentGPA < 4) {
                var Student = {
                  studentID: document.getElementById('Text1').value,
                  studentFirst: document.getElementById('Text2').value,
                  studentLast: document.getElementById('Text3').value,
                  Rank: document.getElementById('Select1').value,
                  studentGPA: document.getElementById('Text4').value,
                };
                Summary.push(Student);
                document.getElementById("studentinfo").innerHTML = "";
                for (var i = 0; i < Summary.length; i  ) {

                  document.getElementById("studentinfo").innerHTML  =
                    "------------------------------------------------------"   "<br/>"
                  "Name: "   Summary[i].studentFirst   " "   Summary[i].studentLast   "<br/>"  
                    "ID: "   Summary[i].studentID   "<br/>"  
                    "Class: "   Summary[i].Rank   "<br/>"  
                    "GPA: "   Summary[i].studentGPA   "<br/>";
                }



              } else
                alert("GPA must be between 0 and 4");
            } else
              alert("GPA is blank");
          } else
            alert("Rank has not been selected");
        } else
          alert("Last Name is blank");
      } else
        alert("First Name is blank");
    } else
      alert("Student ID is blank");
  } else
    alert("Duplicate Student ID");
}

<body onload="AddListeners()">
  ID:<input id="Text1" type="text" />
  <br> First Name:<input id="Text2" type="text" />
  <br> Last Name:<input id="Text3" type="text" />
  <br>
  <select id="Select1">
    <option value="-1">(Select a Rank)</option>
    <option>Freshmen</option>
    <option>Sophomore</option>
    <option>Junior</option>
    <option>Senior</option>
  </select>
  <br> GPA:
  <input id="Text4" type="text" />
  <br>
  <input id="Button1" type="button" value="Add Student" onclick="Create()" />
  <br> All added students today:
  <br>
  <div id="studentinfo"></div>
  <br>
</body>

CodePudding user response：

Rank has no selectedIndex because Rank is not an element or node.

Rank = document.getElementById('Select1').value;

You should set the value attribute on your option tags.

<option value="-1">(Select a Rank)</option>

if (Rank != -1) {

CodePudding user response：

You need to initialize Summary to an empty array. Otherwise, Summary.push() gets an error because you can't push onto undefined.
The index of the prompt option in the Rank menu is 0, not 1, so you should check for that in the validation.
The Create() function reassigns all the variables that contain the input elements, replacing them with their values. You should use different variables, or just use the .value properties of the global variables.
You need to convert the value of Rank to a number before comparing with numbers.
You're missing a at the end of the first line of the string you're appending to the DIV, so you're only adding the ---- line.
When checking for duplicates, you need to compare studentID.value with the studentID property of the array element, not the whole array element. And you should be searching Summary, not studentList.

var studentList = []
var studentID;
var studentFirst;
var studentLast;
var Rank;
var studentGPA;
var Summary = [];
studentID = document.querySelector("#Text1");
studentFirst = document.querySelector("#Text2");
studentLast = document.querySelector("#Text3");
Rank = document.querySelector("#Select1");
studentGPA = document.querySelector("#Text4");

function AddListeners() {

  studentID.addEventListener("mouseenter", ChangeColor1);
  studentID.addEventListener("mouseleave", ChangeColorBack1);
  studentFirst.addEventListener("mouseenter", ChangeColor2);
  studentFirst.addEventListener("mouseleave", ChangeColorBack2);
  studentLast.addEventListener("mouseenter", ChangeColor3);
  studentLast.addEventListener("mouseleave", ChangeColorBack3);
  Rank.addEventListener("mouseenter", ChangeColor4);
  Rank.addEventListener("mouseleave", ChangeColorBack4);
  studentGPA.addEventListener("mouseenter", ChangeColor5);
  studentGPA.addEventListener("mouseleave", ChangeColorBack5);
  studentGPA.addEventListener("keypress", ShowKey);
}

function ChangeColor1() {
  studentID.style.backgroundColor = "yellow";
}

function ChangeColorBack1() {
  studentID.style.backgroundColor = "";
}

function ChangeColor2() {
  studentFirst.style.backgroundColor = "yellow";
}

function ChangeColorBack2() {
  studentFirst.style.backgroundColor = "";
}

function ChangeColor3() {
  studentLast.style.backgroundColor = "yellow";
}

function ChangeColorBack3() {
  studentLast.style.backgroundColor = "";
}

function ChangeColor4() {
  Rank.style.backgroundColor = "yellow";
}

function ChangeColorBack4() {
  Rank.style.backgroundColor = "";
}

function ChangeColor5() {
  studentGPA.style.backgroundColor = "yellow";
}

function ChangeColorBack5() {
  studentGPA.style.backgroundColor = "";
}

function ShowKey(e) {
  if ((e.charCode < 48 || e.charCode > 57) && e.charCode != 46) {
    e.preventDefault();
  }
}

function Create() {
  if (!Summary.find(s => s.studentID == studentID.value)) {
    if (studentID.value != '') {
      if (studentFirst.value != '') {
        if (studentLast.value != '') {
          if (Rank.selectedIndex != 0) {
            if (studentGPA.value != '') {
              let GPAVal = parseFloat(studentGPA.value);
              if (GPAVal > 0 && GPAVal < 4) {
                var Student = {
                  studentID: studentID.value,
                  studentFirst: studentFirst.value,
                  studentLast: studentLast.value,
                  Rank: Rank.value,
                  studentGPA: studentGPA.value,
                };
                Summary.push(Student);
                document.getElementById("studentinfo").innerHTML = "";
                for (var i = 0; i < Summary.length; i  ) {

                  document.getElementById("studentinfo").innerHTML  =
                    "------------------------------------------------------"   "<br/>"  
                    "Name: "   Summary[i].studentFirst   " "   Summary[i].studentLast   "<br/>"  
                    "ID: "   Summary[i].studentID   "<br/>"  
                    "Class: "   Summary[i].Rank   "<br/>"  
                    "GPA: "   Summary[i].studentGPA   "<br/>";
                }



              } else
                alert("GPA must be between 0 and 4");
            } else
              alert("GPA is blank");
          } else
            alert("Rank has not been selected");
        } else
          alert("Last Name is blank");
      } else
        alert("First Name is blank");
    } else
      alert("Student ID is blank");
  } else
    alert("Duplicate Student ID");
}

<body onload="AddListeners()">
  ID:<input id="Text1" type="text" />
  <br> First Name:<input id="Text2" type="text" />
  <br> Last Name:<input id="Text3" type="text" />
  <br>
  <select id="Select1">
    <option>(Select a Rank)</option>
    <option>Freshmen</option>
    <option>Sophomore</option>
    <option>Junior</option>
    <option>Senior</option>
  </select>
  <br> GPA:
  <input id="Text4" type="text" />
  <br>
  <input id="Button1" type="button" value="Add Student" onclick="Create()" />
  <br> All added students today:
  <br>
  <div id="studentinfo"></div>
  <br>
</body>