JavaScript - How .appendChild() while looping?-CodePudding

When I click on the button, I only get one "div" in the color green. But I would like to have 3 "divs" in red, orange and green with only one click. How can I do this? See my code below:

<!-- HTML CODE -->
<section id="container"></section>
<button onclick="myFunc()">BUTTON 1</button>


// JavaScript Code
function myFunc()
{
  var container = document.getElementById("container");
  var newDiv = document.createElement("div");

  const colorArray = ["red", "orange", "green"];
  var divArray = [];

  for (var i = 0; i < 3; i  )
  {
      divArray.push(newDiv);
      var temp = divArray[i];
      temp.setAttribute("style", "background-color: "  colorArray[i]);
      container.appendChild(divArray[i]);
  }
}

CodePudding user response：

You can't reuse a single element, instead you have to create a new one for each step inside the loop. And a <div> needs either some size or some content to actually appear.
So the minimal changes could be the 3 lines with comments:

function myFunc()
{
  var container = document.getElementById("container");
  //var newDiv = document.createElement("div"); // <-- you can't reuse

  const colorArray = ["red", "orange", "green"];
  var divArray = [];

  for (var i = 0; i < 3; i  )
  {
      var newDiv = document.createElement("div"); // <-- have to create a new one
      newDiv.innerHTML="&nbsp;"; // <-- a completely empty, dimensionless div won't appear
      divArray.push(newDiv);
      var temp = divArray[i];
      temp.setAttribute("style", "background-color: "  colorArray[i]);
      container.appendChild(divArray[i]);
  }
}

<section id="container"></section>
<button onclick="myFunc()">BUTTON 1</button>

CodePudding user response：

Do document.createElement inside the loop:

function myFunc() {
  var container = document.getElementById("container");
  const colorArray = ["red", "orange", "green"];
  var divArray = [];

  for (var i = 0; i < 3; i  ) {
    var newDiv = document.createElement("div");
    newDiv.classList.add("new-div")
    divArray.push(newDiv);
    var temp = divArray[i];
    temp.setAttribute("style", "background-color: "   colorArray[i]);
    container.appendChild(divArray[i]);
  }
}

.new-div {
  outline: 1px solid salmon;
  height: 50px;
  width: 50px;
}

<section id="container"></section>
<button onclick="myFunc()">BUTTON 1</button>

CodePudding user response：

I have updated your snippet with syntax correction. Since you are adding new elements to be appended, it's better to create the div element within the loop.

function myFunc() {
  var container = document.getElementById("container");

  const colorArray = ["red", "orange", "green"];
  var divArray = [];

  for (var i = 0; i < 3; i  )

  {
    var newDiv = document.createElement("div");

    newDiv.textContent = i;
    divArray.push(newDiv);

    newDiv.setAttribute("style", "background-color: "   colorArray[i]);

    container.append(newDiv);
  }
}

<section id="container"></section>
<button onclick="myFunc()">BUTTON 1</button>

CodePudding user response：

I would argue thing can be made much simpler:

const container = document.getElementById("container"),
  colorArray = ["red", "orange", "green"];
function myFunc() {
  for (let color of colorArray) {
    container.insertAdjacentHTML(
      "afterend",
      `<div style="background-color:${color};">New div colored ${color}</div>`
    );
  }
}

<section id="container"></section>
<button onclick="myFunc()">BUTTON 1</button>