Question

我正在动态地向对象添加对象并遇到了这个问题。当我点击save（）时，脚本不仅会添加最后一个用户输入，还会添加整个数组本身。最后有一个非常混乱的数组列表。以下是将用户输入添加到数组的函数：

function Save() {
    var name = document.getElementById("name").value;
    var rgb = document.getElementById("colordisplay").innerHTML;
    var opacity = document.getElementById("div").style.opacity;
    colors.push({
        name_prop:name,
        rgb_prop:rgb,
        opacity_prop:opacity
    });
    //pass the object to the drop down list
    var select = document.getElementById("selectColor");
    for (var i = 0; i < colors.length; i++) {
        var opt = colors[i].name_prop;
        var el = document.createElement("option");
        el.innerHTML = opt;
        el.value = opt;
        select.appendChild(el);
        console.log(colors);
    }
}

Here is a JSBIN：要查看问题，请在名称文字字段中添加一些输入，然后点击保存。重复此步骤几次以查看堆积效果。总结一下，我需要脚本只添加最后一个输入而不是一遍又一遍地复制数组。谢谢！

Answer 1

这不是push方法的问题。每次运行colors时，您都会循环遍历整个Save数组，因此它会重新添加您之前添加的元素。

试试这个：

function Save() {
    var name = document.getElementById("name").value;
    var rgb = document.getElementById("colordisplay").innerHTML;
    var opacity = document.getElementById("div").style.opacity;
    colors.push({
        name_prop:name,
        rgb_prop:rgb,
        opacity_prop:opacity
    });

    //pass the object to the drop down list
    var select = document.getElementById("selectColor");
    var opt = name;
    var el = document.createElement("option");
    el.innerHTML = opt;
    el.value = opt;
    select.appendChild(el);
    console.log(colors);
}

Answer 2

推送不是问题。每次通过该功能，您都会将整个列表添加到下拉列表中。只需添加新对象即可。每次都不要循环颜色。

如果查看console.log的输出，您将看到数组的长度正确并包含正确的对象。

Answer 3

您需要删除for循环，然后添加新元素。

/*for (var i = 0; i < colors.length; i++) {*/
    //var opt = colors[i].name_prop;
var opt = name;
    var el = document.createElement("option");
    el.innerHTML = opt;
    el.value = opt;
    select.appendChild(el);
    console.log(colors);
/*  }*/

Answer 4

数组填充正确，选择列表的填充是你做错了。只需添加新颜色（而不是循环所有数组元素，每次保存时添加它们）：

var select = document.getElementById("selectColor");
var el = document.createElement("option");
el.innerHTML = name;
el.value = name;
select.appendChild(el);

Here is your updated example

Answer 5

你应该在追加颜色对象之前清除选择列表

var select = document.getElementById("selectColor");
        select.innerHTML="";//clear the select list 
        for (var i = 0; i < colors.length; i++) {
        var opt = colors[i].name_prop;
        var el = document.createElement("option");
        el.innerHTML = opt;
        el.value = opt;
        select.appendChild(el);
        console.log(colors);
      }

Push方法增加了多于预期的数组？

5 个答案: