Javascript 推送方法向数组添加的内容是否超出预期？

我在动态地向数组添加对象时遇到了这个问题。当我点击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);
    }
}

函数保存（）{
var name=document.getElementById（“name”）.value；
var rgb=document.getElementById（“colordisplay”）.innerHTML；
var opacity=document.getElementById（“div”）.style.opacity；
颜色。推({
姓名(prop):姓名,，
rgb_道具：rgb，
不透明度属性：不透明度
});
//将对象传递到下拉列表
var select=document.getElementById（“selectColor”）；
对于（变量i=0；i

：若要查看问题，请在“名称”文本字段中添加一些输入，然后单击“保存”。重复此步骤几次以查看叠加效果。

---

总而言之，我需要脚本只添加最后的输入，而不是一次又一次地复制数组。谢谢

推不是问题所在。每次通过函数时，您都会将整个列表添加到下拉列表中。只需添加新对象。不要每次都循环使用颜色

---

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

推不是问题。每次通过函数时，您都会将整个列表添加到下拉列表中。只需添加新对象。不要每次都循环使用颜色

---

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

这不是推送方法的问题。每次运行

Save

时，都会在整个

colors

数组上循环，因此它会添加以前添加的元素

试试这个：

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

---

这不是

push

方法的问题。每次运行

Save

时，都会在整个

colors

数组上循环，因此它会添加以前添加的元素

试试这个：

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

---

您需要删除

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);
/*  }*/

/*for（变量i=0；i

您需要删除

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);
/*  }*/

/*for（变量i=0；i

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

---

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

---

在附加颜色对象之前，应清除选择列表

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

var select=document.getElementById（“selectColor”）；
select.innerHTML=“”//清除选择列表
对于（变量i=0；i

在附加颜色对象之前，应清除选择列表

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

var select=document.getElementById（“selectColor”）；
select.innerHTML=“”//清除选择列表
对于（变量i=0；i