[![ingrese la descripción de la imagen aquí][1]][1]Quería crear una aplicación simple para dibujar coloreando el fondo de los cuadrados haciendo clic en ellos. Agregué un evento de clic en cada li que cambia el color de fondo al agregar una clase. Sin embargo, me gustaría llevarlo al siguiente nivel agregando 4 botones que cambiarían los colores del resaltado. Alguien me puede ayudar con eso?
Entonces, mi problema es: ¿Cómo hacer clic en un botón (li en el encabezado) que seleccionará el color para mi detector de eventos original en ul class = grid li?
<header> <ul class="header"> <li class="black">Black</li> <li class="red">Red</li> <li class="blue">Blue</li> <li class="orange">Orange</li> </ul> </header> <ul class="grid"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> ....... const myElements = document.getElementsByTagName("li"); for (let i = 0; i < myElements.length; i++) { myElements[i].addEventListener("click", function () { let selected = myElements[i]; selected.classList.toggle("highlight"); }); }Lo intenté (eliminar y agregar nueva clase, reemplazar clase, alternar)
black.addEventListener("click", function () { selected.classList.replace("highlight", "black"); });Pero el cambio de color de fondo es solo una vez. Quiero que la nueva clase se vuelva permanente. 1]: https://i.stack.imgur.com/Fgg87.png
Al agregar detectores de eventos tanto a su ul.header li como a su ul.grid li , logrará esto. El detector de eventos ul.header li click guardará el color que desee y ul.grid li click utilizará ese color guardado para aplicarlo.
var selcolor = ''; const colorbtns = document.querySelectorAll('ul.header > li'); const griditems = document.querySelectorAll('ul.grid > li'); colorbtns.forEach(function(el) { el.addEventListener("click", function(e) { selcolor = e.target.className; console.log(selcolor); }); }); griditems.forEach(function(el) { el.addEventListener("click", function(e) { if(el.classList.length <= 0) { el.classList.add(selcolor); } else { el.className = ""; } }); }); .header li { display:inline-block; color:#fff; padding:5px; } .grid li { width:50px; height:50px; display:inline-block; border:1px solid black; } .black { background-color:black; } .red { background-color:red; } .blue { background-color:blue; } .orange { background-color:orange; } <header> <ul class="header"> <li class="black">Black</li> <li class="red">Red</li> <li class="blue">Blue</li> <li class="orange">Orange</li> </ul> </header> <ul class="grid"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>EDITAR
Actualizado el código
el.addEventListener("click", function(e) { el.classList.add(selcolor); });A
el.addEventListener("click", function(e) { if(el.classList.length <= 0) { el.classList.add(selcolor); } // this else statement will clear the color on second click if theres already one color assigned else { el.className = ""; } });De esa manera, solo puede asignar el color una vez según su comentario.
Pero el cambio de color de fondo es solo una vez.
En este caso, debería usar mejor los selectores de consultas en JavaScript.
const myElements = document.querySelectorAll("div.grid > li");Puede leer más sobre esto aquí: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector y https://developer.mozilla.org/en-US/docs/Web/ API/Documento/querySelectorAll