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

注意！这是一个额外的学分分配，所以我不是在寻找代码重写，而是在我做错了什么方面的指导。我已经检查了我的代码好几次，我觉得我只是错过了一些非常小的东西。除以下错误外，我已完全完成此操作：

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

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

var tableContent=document.getElementById（“tableContent”）；
var tableString=“”；
var计数器=0；
var courserray=[]；
tableContent.innerHTML=表字符串；
功能课程（编号、标题、学时、预要求）{
这个数字=数字；
this.title=标题；
这个.小时=小时；
this.prereq=prereq；
}
函数createCourse（）{
var number=document.getElementById（“数字字段”）；
var title=document.getElementById（“标题字段”）；
var hours=document.getElementById（“小时字段”）；
var prereq=document.getElementById（“prereq字段”）；
courseArray.push（新课程（编号、标题、学时、预申请））；
buildCourseTableBody（）；
}
函数buildCourseTableBody（）{
表字符串+=“”+
“”+计数器+“”+
“”+Courserray[计数器].number.value+“”+
“+Courserray[计数器].title.value+”+
“+Courserray[计数器].hours.value+”+
“+Courserray[计数器].prereq.value+”+
"" +
"";
计数器++；
tableContent.innerHTML=表字符串；
}
函数删除过程（计数器索引）{
courseArray.拼接（反向索引，1）；
计数器--；
表字符串=”；
对于（变量i=0；i

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

政务司司长课程目录
课程列表
计数
数
标题
小时
预请求
行动




+

您的错误在

createCourse

中。您分配的是

HTML元素

，而不是它们的值

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

课程将保留对元素本身的引用。就像生成表本身的函数一样，始终会获得输入框的最新值

注意:

---

别忘了调整

buildCourseTableBody

和

deleteCourse

如果您用createCourse填充

数组

，那么所有元素都将具有相同的值。使用

控制台记录数组。记录

并在浏览器中查看。在我首次创建数组时，它们都具有唯一且正确的值。这是只有当我将一个元素拼接出来时，其余的元素才能获得相同的值，这些值是我拼接出来的值的副本。只有当用户单击+按钮时才会调用create course函数。因此，用于新元素的值是正确的。当我拼接数组时，我会继续打印新数组，然后再打印出来就是当所有的值都改变时。添加你的html代码…让我们检查一下。好吧，正如我问的那样，我添加了html。同样，当我运行这个程序时，一切都很好。只有当我删除一个课程时，错误才会出现。事实上，我只是在对象变量中添加了.value，它从一开始就破坏了程序。当我创建课程时，它工作正常。当我删除一个课程时课程，它从列表中删除课程，然后重新分配剩余课程，所有的值都与我上次添加的课程相同。所以我明白你所说的输入框的最新值，但调用该函数时就是这种情况。当我从数组中拼接一个对象时，我不明白为什么它会分配all如果createCourse没有被调用，其他对象将再次显示最新的值？我只是把它输入到一个小提琴中。看这里：你能给我一个例子吗？这里是css和delete image：但是你根本没有改变你的JS。我想你没有真正理解我。关于你关于引用的问题：app获取输入字段的最新值，因为数组包含对HTML元素的引用。因此，每当访问数组元素时（不调用函数等），这些引用用于查找值。只需从

buildCourseTableBody

和

deleteCourse

中的所有数组访问中删除

.value

，然后从上面使用

createCourse

函数（已修改）。

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