Problem with cell selection on a dynamic Grid (Javascript / HTML)-CodePudding

I am new into Javascript and I am trying some basic stuff but I came across this problem. So the concept is to build a dynamic grid and a color picker tool. You can change the cells (squares) of the grid by clicking on them (after selecting your color) and by pressing the clear button the grid "restarts".

So picking a color and clicking does the job (although this.style.backgroundColor doesn't seem like the best of choices) but I can't seem to be able to recolor(clear) the whole grid.

Every cell that I have clicked will keep the color it already has.

Where am I short thinking this?

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>

CodePudding user response：

You seem to be setting the background color of the grid container itself, rather than its child cells. You can loop through all the <div> elements inside the grid and set each backgroundColor to "transparent.

I also converted the grid to a 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>