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 + " )"
  }
}

user_6094348 · Answer

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) + " )"
}

user_295783 · Answer

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
}

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
}

user_4239582 · Answer

The issue was with extra comma added by your code in th linear-gradient function arguement which made the value invalid. Hence no gradient.

Try to debug this type of issue on your own by putting breakpoint in js code, will make you better developer each day.

Changing the code below which works.

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

How do I fix? DOM javascript gradient not working?

3 Answers