CODEWITHSUNDEEP
javascript
Tyler Thomas
Tyler Thomas

Reputation: 140

forEach loop to set property as CSS value

so basically what I'm trying to do is create dynamic HTML elements, but there's some weird interaction I'm not understanding.

Here is the code snippet for reference:

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

So what I have is an array that will be dynamically populated but right now it's hard coded.

colorOptions.forEach((item) => {
  colorOption.style.backgroundColor = item;
  optionsArray.push(colorOption);
});

And then as you can see I have a forEach loop that sets the backgroundColor of the element to the value of the index. The problem is that for some reason it all gets set to the last index.

When I console log item, I get the value of each index. When I console log colorOption I get the value of each index. But some how when it gets pushed to the new array, every index has "orange" assigned as it's background-color.

Here's an image of the console

I feel like I'm missing something stupid, but I'm honestly losing my mind.

Upvotes: 0

Views: 2545

Answers (3)

Nelson Lopes
Nelson Lopes

Reputation: 26

Try it:

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


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

Upvotes: 1

Showrin Barua
Showrin Barua

Reputation: 1795

I think you are using the same div as colorOption. If it's the case, the result you got is totally right.

Cause --->

  1. In the first iteration the color of the div is getting green.
  2. Then in the second iteration, the color of the same div is getting blue.
  3. And in the third iteration, it's getting orange.

And since you are pushing the reference of colorOption, that means all the divs you've pushed were indicating the same element. So when you are changing the color of that div, all the elements were showing that color.

Upvotes: 0

N. Kern
N. Kern

Reputation: 411

There are two things happening in your loop.

  1. Set colorOption.style.backgroundColor to item
  2. Append a reference to colorOption to optionsArray

The problem is you are pushing a reference to the same object each time. After the third iteration, you have three references to the same object, which currently has its style.backgroundColor attribute set to "orange". That's why you get three copies of "orange".

I am not totally sure what you are trying to accomplish, but if you really want to use an object in this array, then you need to create a separate object each time you push.

Edit: to prove my point, I believe if you were to console.log(optionsArray) instead of colorOption as you say, you would see that in the second iteration of your loop, you have two copies of "blue".

Upvotes: 1

Related Questions