splice in javascript change values of my other objects

Question

NOTE! this is for an extra credit assignment, so I am not looking for code re-write but rather guidance in what I am doing wrong. I have gone through my code several times and I feel like I am just missing something very minor. I have completed it fully with the exception of the following error:

I created an array of objects. Everything starts off fine. I can create objects and they are added to the array and successfully displayed on my screen with correct values. The trouble arises when I delete an object from the array. It does delete this object and removes it from my displayed list, but suddenly all the remaining objects get new values. These new values match those of the LAST object I added to the array. I need them to retain their original values!

var tableContent = document.getElementById("tableContent");
var tableString = " ";
var counter = 0;
var courseArray = [];
tableContent.innerHTML = tableString;

function Course(number, title, hours, prereq) {
    this.number = number;
    this.title = title;
    this.hours = hours;
    this.prereq = prereq;
}

function createCourse() {
    var number = document.getElementById("number-field");
    var title = document.getElementById("title-field");
    var hours = document.getElementById("hours-field");
    var prereq = document.getElementById("prereq-field");
    courseArray.push(new Course(number, title, hours, prereq));
    buildCourseTableBody();
}
function buildCourseTableBody() {

    tableString += "<tr>" +
        "<td>" + counter + "</td>" +
        "<td>" + courseArray[counter].number.value + "</td>" +
        "<td>" + courseArray[counter].title.value + "</td>" +
        "<td>" + courseArray[counter].hours.value + "</td>" +
        "<td>" + courseArray[counter].prereq.value + "</td>" +
        "<td><button id='delete' onClick='deleteCourse(" + counter + ")'><img id=counter src='../image/delete.png' alt='delete course'></button></td>" +
        "</tr>";
    counter++;
    tableContent.innerHTML = tableString;

}
function deleteCourse(counterIndex) {
    courseArray.splice(counterIndex, 1);
    counter--;
    tableString = "";
    for (var i = 0; i < courseArray.length; i++) {
        tableString += "<tr>" +
            "<td>" + i + "</td>" +
            "<td>" + courseArray[i].number.value + "</td>" +
            "<td>" + courseArray[i].title.value + "</td>" +
            "<td>" + courseArray[i].hours.value + "</td>" +
            "<td>" + courseArray[i].prereq.value + "</td>" +
            "<td><button id='delete' onClick='deleteCourse(" + i + ")'><img id=counter src='../image/delete.png' alt='delete course'></button></td>" +
            "</tr>";
    }

and HTML code(everything in main, which is wrapped in body. js file is included):

<main id="main-index">
    <h1 id="page-caption">CS Department Course Catalog</h1>


    <div id="course-list">
        <p id="course-list-caption">Course List</p>

        <table>
            <thead>
            <tr>
                <th>Count</th>
                <th>Number</th>
                <th>Title</th>
                <th>Hours</th>
                <th>Prereq</th>
                <th>Action</th>
            </tr>
            </thead>

            <tbody id="tableContent">


            </tbody>
        </table>
    </div>


    <div id="course-edit">
        <p><input id="number-field" placeholder="Course #, e.g. CS234"></p>
        <p><input id="title-field" placeholder="Course title, e.g. Database and Wed Systems Development"></p>
        <p><input id="hours-field" placeholder="Credit hours, e.g. 3.0"></p>
        <p><input id="prereq-field" placeholder="Course prereqs, e.g. CS150, CS111"></p>

        <p><button id="add" onClick="createCourse()">+</button></p>
    </div>

</main>

Answer 1

Your error is in createCourse. You are assigning the HTML-Elements instead of their value.

function createCourse() {
  var number = document.getElementById("number-field").value;
  var title = document.getElementById("title-field").value;
  var hours = document.getElementById("hours-field").value;
  var prereq = document.getElementById("prereq-field").value;
  courseArray.push(new Course(number, title, hours, prereq));
  buildCourseTableBody();
}

The class course will hold a reference to the element itself. Like that your functions which generate the table itself, will always get the most current value of the input boxes.

Notice: Don't forget to adapt buildCourseTableBody and deleteCourse.