Javascript forEach循环将属性设置为CSS值

所以基本上我想做的是创建动态HTML元素，但是有一些奇怪的交互我不理解

以下是供参考的代码片段：

让colorOptions=[“绿色”、“蓝色”、“橙色”]

所以我有一个数组，它将被动态填充，但现在它是硬编码的

colorOptions.forEach（（项目）=>{
colorOption.style.backgroundColor=项目；
选项Array.push（颜色选项）；
});

然后你可以看到我有一个forEach循环，它将元素的backgroundColor设置为索引的值。
问题是，出于某种原因，它都被设置为最后一个索引

当我控制台日志项时，我得到每个索引的值。当我使用log colorOption时，我会得到每个索引的值。但是，当它被推送到新数组时，每个索引的背景色都是“橙色”

这是一个

我觉得我错过了一些愚蠢的事情，但我真的失去了理智。
在你的循环中发生了两件事

将colorOption.style.backgroundColor设置为项目
将对colorOption的引用附加到optionsArray
问题是每次都将引用推送到同一个对象。在第三次迭代之后，您有三个对同一对象的引用，该对象当前的style.backgroundColor属性设置为“橙色”。这就是为什么你会得到三份“橙色”的原因

我不完全确定您想要完成什么，但是如果您真的想在这个数组中使用一个对象，那么您需要在每次推送时创建一个单独的对象

编辑：为了证明我的观点，我相信如果您使用
console.log（optionsArray）
而不是您所说的
colorOption
，您将看到在循环的第二次迭代中，您有两个“blue”副本。
在您的循环中发生了两件事

将colorOption.style.backgroundColor设置为项目
将对colorOption的引用附加到optionsArray
问题是每次都将引用推送到同一个对象。在第三次迭代之后，您有三个对同一对象的引用，该对象当前的style.backgroundColor属性设置为“橙色”。这就是为什么你会得到三份“橙色”的原因

我不完全确定您想要完成什么，但是如果您真的想在这个数组中使用一个对象，那么您需要在每次推送时创建一个单独的对象

编辑：为了证明我的观点，我相信如果你使用
console.log（optionsArray）
而不是你所说的
colorOption
，你会看到在循环的第二次迭代中，你有两个“blue”的副本。
我认为你使用的是与
colorOption
相同的div。如果是这样的话，你得到的结果是完全正确的

原因-->

在第一次迭代中，div的颜色变为绿色
然后在第二次迭代中，相同div的颜色变为蓝色
在第三次迭代中，它变成橙色
由于您正在推送
colorOption
的引用，这意味着您推送的所有div都指示相同的元素。因此，当您更改该div的颜色时，所有元素都显示该颜色。
我认为您使用的是与
colorOption
相同的div。如果是这样的话，你得到的结果是完全正确的

原因-->

在第一次迭代中，div的颜色变为绿色
然后在第二次迭代中，相同div的颜色变为蓝色
在第三次迭代中，它变成橙色
由于您正在推送
colorOption
的引用，这意味着您推送的所有div都指示相同的元素。因此，当您更改该div的颜色时，所有元素都显示该颜色。
试试：

    let colorOptions = ["green", "blue", "orange"];
    let optionsArray = [];

    colorOptions.forEach((item) => {
       let colorOption = document.createElement("div");
       colorOption.innerText = item;
       colorOption.style.backgroundColor = item;
       optionsArray.push(colorOption);    
    });


   optionsArray.forEach((item) => {
      console.log(item);
      document.body.appendChild(item);
   });


让colorOptions=[“绿色”、“蓝色”、“橙色”]；
让optionsArray=[]；
colorOptions.forEach（（项目）=>{
让colorOption=document.createElement（“div”）；
colorOption.innerText=项目；
colorOption.style.backgroundColor=项目；
选项Array.push（颜色选项）；
});
optionsArray.forEach（（项目）=>{
控制台日志（项目）；
文件.正文.附件（项）；
});试试看：

    let colorOptions = ["green", "blue", "orange"];
    let optionsArray = [];

    colorOptions.forEach((item) => {
       let colorOption = document.createElement("div");
       colorOption.innerText = item;
       colorOption.style.backgroundColor = item;
       optionsArray.push(colorOption);    
    });


   optionsArray.forEach((item) => {
      console.log(item);
      document.body.appendChild(item);
   });


让colorOptions=[“绿色”、“蓝色”、“橙色”]；
让optionsArray=[]；
colorOptions.forEach（（项目）=>{
让colorOption=document.createElement（“div”）；
colorOption.innerText=项目；
colorOption.style.backgroundColor=项目；
选项Array.push（颜色选项）；
});
optionsArray.forEach（（项目）=>{
控制台日志（项目）；
文件.正文.附件（项）；
});请编辑您的问题并使用工具栏按钮创建一个代码段，这样我们就可以运行代码并查看哪里出错了。目前我看到了未定义的变量
colorOption
（单数）和
optionsArray
，还有一种误解，认为
item
是一个“索引”。是的，
colorOption
到底是什么？可以循环使用颜色，但在循环的每次迭代中，都要将style.backgroundColor of color选项设置为颜色。因此colorOption.style.backgroundColor将作为数组中的最后一项。请编辑您的问题并使用工具栏按钮创建一个代码段，以便我们可以运行代码并查看出错的地方。目前我看到了未定义的变量
colorOption
（单数）和
optionsArray
，还有一种误解，认为
item
是一个“索引”。是的，
colorOption
到底是什么？可以循环使用颜色，但在循环的每次迭代中，都要将style.backgroundColor of color选项设置为颜色。所以colorOption.style.backgroundColor