let wrapperSt = document.querySelector(".wrapper"); for(i=0; i<100; i++){ let divGroup = document.createElement('div'); wrapperSt.append(divGroup); divGroup.className= 'pixel'; divGroup.textContent= ''; }Creé el elemento div llamado "píxel" usando bucle porque necesito un par de cientos de ellos. ( Los usaré como cajitas que pueden cambiar de color )
Pero, quiero que estos cuadros (" pixel " div) se vuelvan marrones y sostenidos ( style.backgroundColor ="brown"; )
Entonces, creé otro div que reemplazará al div anterior (" píxel ").
let selectPx = document.getElementsByClassName("pixel"); selectPx.addEventListener("mouseover", function(){ let pxChange = createElement("div"); //This is where i got stuck! })No pude terminar mi código, lo encontré un poco complicado aunque probablemente sea algo muy simple.
Cualquier sugerencia o pieza de información sería muy útil. Gracias.
No estoy seguro exactamente de lo que está tratando de hacer... ¿Creo que está tratando de cambiar el color del div sobre el que se encuentra el mouse? Si es así, tienes un par de problemas con tu código. En lugar de agregar el detector de eventos a la lista de div s, debe agregarlo a cada uno individualmente. Además, solo debería necesitar cambiar el color de fondo de cada elemento en lugar de crear uno nuevo cada vez.
let selectPx = document.querySelectorAll(".pixel"); selectPx.forEach(pixel => { pixel.addEventListener("mouseover", () => { pixel.style.backgroundColor = "brown"; }); });No estoy seguro de por qué tienes que crear un nuevo div dentro del primero. En su código, cuando activa el evento mouseover, puede obtener el div debajo del mouse y aplicarle el estilo:
let selectPx = document.getElementsByClassName("pixel"); selectPx.addEventListener("mouseover", function(evt){ let divUnderMouse = evt.target; divUnderMouse.style.backgroundColor ="brown"; })no lo he probado pero debería funcionar