'Change color of gradient based on user selection

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Change color of gradient based on user selection

Sources

Related Questions