Estoy tratando de cambiar el color de un degradado según la selección del usuario, tengo todo funcionando pero no sé cómo cambiar el degradado usando el formato que tengo. ( 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>Puede usar literales de plantilla para que los valores del selector de color se inserten dinámicamente en el CSS.
Además, en lugar de recorrer todos los elementos y luego configurar controladores de eventos para cada uno de los elementos de input , puede aprovechar la "delegación de eventos" y configurar solo un controlador de eventos.
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>