How do I fix? DOM javascript gradient not working?

Question

I need to take the colors of the "child" elements from the "parent" element and make a linear gradient out of them, and then insert it into the "gradient" element. In the alert, my style background-color is repeated several times. How do I fix this?

function myFunction() {
  var gradientcolor = "";
  var childcolor = document.getElementById("parent").children;
  var i;
  for (i = 0; i < childcolor.length; i++) {
    gradientcolor += childcolor[i].style.backgroundColor + ', ';
    console.log(gradientcolor);
    document.getElementById("gradient").style.backgroundImage = "linear-gradient(to right, " + gradientcolor + " )"
  }
}

<div id="parent">
  <div id="child" style="width:50px;height:50px;background-color:rgb(255, 0, 0);"></div>
  <div id="child" style="width:50px;height:50px;background-color:rgb(0, 215, 0);"></div>
  <div id="child" style="width:50px;height:50px;background-color:rgb(0, 0, 255);"></div>
</div>
<div id="gradient" style="width:150px;height:50px;background-color:#f2f2f2"></div>

<button onclick="myFunction()">Try it</button>

Answer 1

you need to remove trailing , sign at the end of the gradientcolor variable and set the background on the gradient element outside of the for loop

function myFunction() {

  let gradientcolor = "";
  let childcolor = document.getElementById("parent").children;

  for (let i = 0; i < childcolor.length; i++) {
    gradientcolor += childcolor[i].style.backgroundColor + ', ';
  }

  document.getElementById("gradient").style.background = "linear-gradient(to right, " + gradientcolor.slice(0, -2) + " )"
}

<div id="parent">
  <div id="child" style="width:50px;height:50px;background-color:rgb(255, 0, 0);"></div>
  <div id="child" style="width:50px;height:50px;background-color:rgb(0, 215, 0);"></div>
  <div id="child" style="width:50px;height:50px;background-color:rgb(0, 0, 255);"></div>
</div>
<div id="gradient" style="width:150px;height:50px;background-color:#f2f2f2"></div>

<button onclick="myFunction()">Try it</button>

Answer 2

• It is background, not background image
• you have a trailing comma, that makes the final statement not work.
• you need to move the assignment outside the loop - although it still works, you now assign the string 3 times
• Also, although you do not use them, IDs need to be unique

If you use an array and push, you do not get weird commas either:

function myFunction() {
  var gradientcolor = []; // create an array
  var childcolor = document.getElementById("parent").children;
  var i;
  for (i = 0; i < childcolor.length; i++) {
    gradientcolor.push(childcolor[i].style.backgroundColor); // add to the array
  }
  // this join concatenates all array items with a comma - 
  // using comma is actually default so not even needed
  const statement = "linear-gradient(to right, " + gradientcolor.join(",") + " )"; 
  console.log(statement)
  document.getElementById("gradient").style.background = statement
}

<div id="parent">
  <div class="child" style="width:50px;height:50px;background-color:rgb(255, 0, 0);"></div>
  <div class="child" style="width:50px;height:50px;background-color:rgb(0, 215, 0);"></div>
  <div class="child" style="width:50px;height:50px;background-color:rgb(0, 0, 255);"></div>
</div>
<div id="gradient" style="width:150px;height:50px;background-color:#f2f2f2"></div>
<button onclick="myFunction()">Try it</button>

ES6 version without inline script and css. Gave the child divs a class of child and changed the ID to be unique

window.addEventListener("load", () => { // when the page loads
  document.getElementById("tryIt").addEventListener("click", () => { // when the specific button is clicked
    const gradientcolor = [...document.querySelectorAll("#parent .child")]   // creating an array from the HTMLElementCollection
      .map(child => getComputedStyle(child).getPropertyValue('background-color')); // grabbing the background-color from each
    document.getElementById("gradient").style.background = `linear-gradient(to right, ${gradientcolor.join(",")})`; // using template literal to wrap the string around the joined array
  })
})

.child {
  width: 50px;
  height: 50px;
}

#c1 {
  background-color: rgb(255, 0, 0);
}

#c2 {
  background-color: rgb(0, 215, 0);
}

#c3 {
  background-color: rgb(0, 0, 255);
}

#gradient {
  width: 150px;
  height: 50px;
  background-color: #f2f2f2
}

<div id="parent">
  <div class="child" id="c1"></div>
  <div class="child" id="c2"></div>
  <div class="child" id="c3"></div>
</div>
<div id="gradient"></div>
<button type="button" id="tryIt">Try it</button>