Soy nuevo en Javascript y estoy probando algunas cosas básicas, pero me encontré con este problema. Entonces, el concepto es construir una cuadrícula dinámica y una herramienta de selección de color. Puede cambiar las celdas (cuadrados) de la cuadrícula haciendo clic en ellos (después de seleccionar su color) y presionando el botón Borrar, la cuadrícula se "reinicia".
Entonces, elegir un color y hacer clic hace el trabajo (aunque this.style.backgroundColor no parece ser la mejor de las opciones), pero parece que no puedo volver a colorear (borrar) toda la cuadrícula.
Cada celda en la que he hecho clic mantendrá el color que ya tiene.
¿Dónde estoy corto pensando en esto?
const c = document.getElementById("grid"); for (let i = 0; i < 500; i += 20) { for (let j = 0; j < 500; j += 20) { let r = document.createElement("div"); r.style.left = `${i}px`; r.style.top = `${j}px`; r.classList.add("square"); r.onclick = onClickCell; c.appendChild(r); } } function onClickCell() { const rgbaColor = document.getElementById("color").value; this.style.backgroundColor = rgbaColor; } function clear() { const gridStartingColor = `rgba(231,231, 231, 222)`; //for visual help, replace with gridStartingColor c.style.backgroundColor = "blue"; } document.getElementById("initialize").onclick = clear; { box-sizing: border-box; } html { min-height: 100vh; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #grid { width: 500px; height: 500px; background: rgb(231, 231, 222); border: 1px solid blue; position: relative; } .square { width: 20px; height: 20px; position: absolute; border: 1px solid blue; } .square.clicked { background: red; } #controls { display: flex; justify-content: center; align-items: center; margin: 0.5em; } button { background-color: #e7e7e7; margin-left: 10px; text-align: center; padding: 5px; width: 15ch; } <div class="centered"> <div id="controls"> <div> Select color: <input type="color" id="color" value="#f6b73c" /> </div> <button id="initialize">Clear!</button> </div> <div id="grid"></div> </div>Parece que está configurando el color de fondo del contenedor de la cuadrícula en sí, en lugar de sus celdas secundarias. Puede recorrer todos los elementos <div> dentro de la cuadrícula y establecer cada color de backgroundColor en "transparente".
También convertí la cuadrícula en un flexbox.
const c = document.getElementById("grid"); function onClickCell() { const rgbaColor = document.getElementById("color").value; this.style.backgroundColor = rgbaColor; } function clear() { var ds = c.getElementsByTagName('div'); for (i = 0; i < ds.length; i++) { ds[i].style.backgroundColor = 'transparent'; } } for (let i = 0; i < 500; i += 20) { for (let j = 0; j < 100; j += 20) { let r = document.createElement("div"); r.classList.add("square"); r.onclick = onClickCell; c.appendChild(r); } } document.getElementById("initialize").onclick = clear; .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #grid { width: 500px; height: 100px; background: rgb(231, 231, 222); border: 1px solid blue; display: flex; flex-wrap: wrap; } .square { flex: 0 0 20px; height: 20px; border: 1px solid blue; box-sizing: border-box; } #controls { display: flex; justify-content: center; align-items: center; margin: 0.5em; } button { background-color: #e7e7e7; margin-left: 10px; text-align: center; padding: 5px; width: 15ch; } <div class="centered"> <div id="controls"> <div> Select color: <input type="color" id="color" value="#f6b73c" /> </div> <button id="initialize">Clear!</button> </div> <div id="grid"></div> </div>