Soy nuevo en la programación y esta es mi primera pregunta. El problema que tengo es que estoy tratando de usar la manipulación DOM en todos los nodos secundarios de una colección html. Espero que los nodos cambien el color de fondo cuando se desplazan. Esto es lo que he intentado hasta ahora:
let x = 0; do{ const square = document.createElement("div"); square.className = "squares"; square.setAttribute("id","block"); document.getElementById("container").appendChild(square); x++; } while(x < 16); var container = document.getElementById("container"); var cells = container.childNodes; cells.forEach(function(){ cells.onmouseover = function(){ cells.style.backgroundColor = "black"; } }); console.log(`${cells.length}`);Esto no funciona a pesar de que console.log muestra 16 nodos secundarios como objetivo.
var container = document.getElementById("container"); var cells = container.children[0]; cells.onmouseover = function(){ cells.style.backgroundColor = "black"; }He intentado esto y puedo usar el índice pero, por supuesto, solo esa celda cambiará de color. Quiero que cualquier celda que esté sobrevolada cambie también.
Estoy perdido por lo que estoy haciendo mal aquí. Si alguien puede indicarme la dirección correcta, se lo agradecería mucho.
Bienvenido a Stack Overflow. Hay un problema en su ciclo forEach . Considera lo siguiente:
cells.forEach(cell => { cell.onmouseover = () => { cell.style.backgroundColor = "black" } }) Tenga en cuenta que debe referirse a la variable de ciclo en lugar de la matriz de cells .
En lugar de adjuntar oyentes a todos los cuadrados, puede usar la delegación de eventos y tener solo un oyente en el contenedor que captura los eventos de sus elementos secundarios a medida que "hacen burbujas" en el DOM.
// Cache the container element, and add a listener to it const container = document.querySelector('.container'); container.addEventListener('mouseover', handleMouse); // Create some squares HTML by pushing template // strings into an array const html = []; for (let i = 1; i < 10; i++) { html.push(`<div class="square">${i}</div>`); } // Add that HTML to the container making sure // we join the array of strings into one string container.innerHTML = html.join(''); // When a event is fired check that it was // was from an element with a square class // and then add an active class to it function handleMouse(e) { if (e.target.matches('.square')) { e.target.classList.add('active'); } } .container { display: grid; grid-template-columns: repeat(3, 50px); grid-gap: 0.2em; } .square { font-size: 1.2em; padding: 0.7em 0.2em; background-color: #565656; color: white; text-align: center; } .square.active { background-color: thistle; color: black; cursor: pointer; } <div class="container"></div>Documentación adicional