Dentro de mi programa, estoy generando una cuadrícula de campos y asignándoles el nombre de clase de "elemento de cuadrícula". Tengo un detector de eventos aplicado para mouseover. A medida que se desplaza el mouse, se aplica un nuevo color de fondo al color de fondo del "elemento de cuadrícula" respectivo.
Estoy tratando de hacer un botón claro que restablecerá todos estos colores de fondo a "", pero sigo recibiendo el error "Error de tipo no detectado: no se pueden establecer propiedades de indefinido (configurando 'backgroundColor')" y estoy perdido.
Creo que mi problema radica en que mi función onClick no puede encontrar el "elemento de cuadrícula".
¿Alguien puede indicarme la dirección correcta sin darme explícitamente la respuesta?
javascript
const container = document.getElementById("container"); function makeRows(rows, cols) { container.style.setProperty('--grid-rows', rows); container.style.setProperty('--grid-cols', cols); for (c = 0; c < (rows * cols); c++) { let cell = document.createElement("div"); cell.addEventListener("mouseover", function(event){ event.target.style.backgroundColor = "orange"; } ) container.appendChild(cell).className = "grid-item"; } }; let clear = document.getElementById("clearBtn"); clear.onclick = function(){ document.getElementsByClassName('grid-item').style.backgroundColor = ""; } makeRows(16, 16);declaración de botón en el archivo HTML
<button id = "clearBtn">Clear</button>document.getElementsByClassName('grid-item') le devuelve la matriz de elementos, por lo que no puede usar la propiedad .style de ella.
código actualizado: https://jsfiddle.net/4r18o97v/1/
let clear = document.getElementById("clearBtn"); clear.onclick = function(){ var elements = document.getElementsByClassName('grid-item'); for (var i = 0; i < elements.length; i++) { elements[i].style.backgroundColor = ""; } }