Este es el código que escribí para encontrar la respuesta a un desafío de programación y es para insertar elementos en un elemento con los valores iguales a los nombres de los colores y elegir un formulario de color, la lista cambiará el color de debajo y se supone que debe ser Solo JS. Pero mi problema es que mi código funciona perfectamente en Firefox, pero no funciona en Chrome ni en otros navegadores.
const color = [ "red", "black", "blue" ]; let select = document.getElementById("select"); for (let i = 0; i < color.length; i++) { let container = document.createElement("option"); container.innerText = color[i]; container.value = color[i]; container.id = i+1; select.append(container); } for (let j = 1; j <= color.length; j++) { select[j].addEventListener("click", function colorChange() { document.getElementById("box").style.backgroundColor = `${select[j].value}`; }); } #box { width: 50px; height: 50px; border: 1px solid green; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> </head> <body> <select name="" id="select"> <option value="">Choose a color</option> </select> <div id="box"> </div> <script src="script.js"> </script> </body> </html>Bueno, buenas noticias, esto no se debe a que JavaScript esté deshabilitado en el navegador . Intenté ejecutar su código en Firefox y Vivaldi y parece que Vivaldi, Google Chrome y otros navegadores web basados en Chromium ignoraron su solicitud para insertar un activador de eventos. Me refiero a esta parte de tu código:
for (let j = 1; j <= color.length; j++) { select[j].addEventListener("click", function colorChange() { document.getElementById("box").style.backgroundColor = `${select[j].value}`; }); } No sé cuál es el correcto: si se pueden agregar activadores de eventos dentro de las etiquetas <option> dentro de <select> o no. Es posible que desee reenviar este problema a mi equipo a través de Webcompat.com .
Dado que ya asignó los value para cada <option> (consulte container.value = color[i]; ), en realidad no necesita agregar estos activadores de eventos para cada una de las <option> . En su lugar, puede colocar el disparador directamente dentro del elemento <select> , reemplazando su segundo bucle en este:
select.addEventListener("click", function colorChange() { document.getElementById("box").style.backgroundColor = select.value; });Entonces, el código general se vería así:
const color = [ "red", "black", "blue" ]; let select = document.getElementById("select"); for (let i = 0; i < color.length; i++) { let container = document.createElement("option"); container.innerText = color[i]; container.value = color[i]; container.id = i+1; select.append(container); } for (let j = 1; j <= color.length; j++) { select[j].addEventListener("click", function colorChange() { document.getElementById("box").style.backgroundColor = `${select[j].value}`; }); } select.addEventListener("click", function colorChange() { document.getElementById("box").style.backgroundColor = select.value; }); Editar: usar el detector de change en lugar de click sería una mejor idea, ya que la función colorChange() solo se ejecutará si se ha cambiado el valor desplegable. Gracias a pyb por señalar esto .
Actualización: he reenviado esto a https://github.com/webcompat/web-bugs/issues/97662 .
Lo hice funcionar haciendo los siguientes cambios:
change en la selecciónoption seleccionado como this`${select[j].value}` a this.value en el detector de eventos <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> </head> <body> <select name="" id="select"> <option value="">Choose a color</option> </select> <div id="box"> </div> <script src="script.js"> </script> </body> </html> const color = [ "red", "black", "blue" ]; let select = document.getElementById("select"); for (let i = 0; i < color.length; i++) { let container = document.createElement("option"); container.innerText = color[i]; container.value = color[i]; container.id = i+1; select.append(container); } select.addEventListener("change", function colorChange() { document.getElementById("box").style.backgroundColor = this.value; });Cuando el código funciona en un solo navegador y no en el resto, es un indicador de que su código no está escrito correctamente. El hecho de que se ejecute en Firefox tiene sentido, ya que este navegador suele admitir opciones experimentales que aún no se admiten a nivel mundial.
Mirando su código, encontré algunos problemas, como declarar una función por nombre dentro del detector de eventos. Establecer un oyente en un elemento de opción es contraproducente en mi opinión, así que lo cambié a un oyente de change más estándar/útil.
const color = [ "red", "black", "blue" ]; let select = document.getElementById("select"); for (let i = 0; i < color.length; i++) { let container = document.createElement("option"); container.innerText = color[i]; container.value = color[i]; container.id = i+1; select.append(container); } // Select an option will trigger the change event. select.addEventListener("change", function() { document.getElementById("box").style.backgroundColor = this.value; }); #box { width: 50px; height: 50px; border: 1px solid green; } <select name="" id="select"> <option value="">Choose a color</option> </select> <div id="box"></div>