Change color of gradient based on user selection

May 20, 2022

I am trying to change the color of a gradient depending on user selection, I have everything working but I just don’t know how to change the gradient using the format I have. (change.style.background = "linear-gradient(90deg, color1, red)";).

const len = document.querySelectorAll("input").length;
let change = document.querySelector(".body");

for (let x = 0; x < len; x++) {
    document.querySelectorAll("input")[x].addEventListener("input", function() {
        let color1 = this.value;
        if (this.getAttribute("name")==="color1") {
            change.style.background = "linear-gradient(90deg, color1, red)";
        }
    });
}

.body{
  background:linear-gradient(90deg, blue, red);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body class="body">
    <h1>Background Generator</h1>
    <input type="color" name="color1" value="#996DAD">
    <input type="color" name="color2" value="#23AD23">
  </body>
</html>

>Solution :

You can use template literals to have the color picker values dynamically inserted into the CSS.

Also, instead of looping over all the elements and then setting up event handlers for each of the input elements, you can leverage "event delegation" and only set up one event handler.

const picker1 = document.querySelector("input[name='color1']");
const picker2 = document.querySelector("input[name='color2']");

// No need to loop over all the input elements and set up an event
// handler for each. Just set up one event handler at a common ancestor
// of the elements you care about and let the event bubble up to be 
// handled there
document.addEventListener("input", function(event){
  // Now test to see if the event was triggered by an element you 
  // wish to handle
  if(event.target.classList.contains("colorPicker")){
    // Use template literals to insert JS values into a string:
    document.body.style.background = 
      `linear-gradient(90deg, ${picker1.value}, ${picker2.value})`;
  }
});

.body{
  background:linear-gradient(90deg, blue, red);
}

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body class="body">
        <h1>Background Generator</h1>
        <input type="color" name="color1" value="#996DAD" class="colorPicker">
        <input type="color" name="color2" value="#23AD23" class="colorPicker">
    
        <script src="script.js" charset="utf-8"></script>
      </body>
    </html>