拼接 javascript 更改我其他对象的值

Question

注意！这是为了额外的学分分配，所以我不是在寻找代码重写，而是在寻找我做错了什么的指导。我已经多次检查我的代码，我觉得我只是遗漏了一些非常小的东西。除了以下错误外，我已完全完成它：

我创建了一个对象数组。一切都开始顺利。我可以创建对象并将它们添加到数组中并以正确的值成功显示在我的屏幕上。当我从数组中删除一个对象时，问题就出现了。它确实删除了这个对象并将其从我显示的列表中删除，但突然间所有剩余的对象都获得了新值。这些新值与我添加到数组中的最后一个对象的值相匹配。我需要它们保留原来的值！

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>";
    }

和HTML代码（包含在body.js文件中的main中的所有内容）：

<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

您的错误在 createCourse。您分配的是 HTML-Elements 而不是它们的值。

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();
}

class 课程将保存对元素本身的引用。就像你自己生成 table 的函数一样，将始终获得输入框的最大 current 值。

注意事项：不要忘记调整 buildCourseTableBody 和 deleteCourse.

拼接 javascript 更改我其他对象的值

splice in javascript change values of my other objects

javascript

arrays

splice