如何重置颜色网格？

Question

我正在创建一个简单的 etch-a-sketch 游戏。目前悬停在黑色上。我正在尝试使用按钮将颜色重置为白色。但是，我无法让按钮与事件侦听器一起使用，如果我添加警报，它会显示警报，但没有别的。请指导我并提供我可以参考的文档，因为我想学习和修复它而不解释将适得其反。

谢谢！

const containerGrid = document.getElementById("mainGrid");

function makeGrid(col) {
  for (let i = 0; i < col * col; i++) {
    const gridAdd = document.createElement("div");
    gridAdd.classList.add("box");
    gridAdd.textContent = "";

    containerGrid.appendChild(gridAdd);
  }
}

makeGrid(16); // make grid 16*16

const btnClear = document.getElementById("clear");
//mouseover event black - need to link to button (well done :)
const boxes = document.querySelectorAll('.box').forEach(item => {
  item.addEventListener('mouseover', event => {
    item.style.backgroundColor = "black";
  })
});

btnClear.addEventListener("click", () => {
  boxes.style.backgroundColor = "white";
});

const changeGrid = document.getElementById(".sizechange");


/*clearBtn.forEach.addEventListener("click", function () {
clearBtn.style.color ="white";
});
*/


/*const randomBtn = document.getElementById("randomgen").addEventListener('click',(e) => {
    console.log(this.classname)    
    console.log(e.currentTarget === this)
    }) */
//change color

#mainGrid {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: auto;
  margin-left: 150px;
  width: 200px;
}

.box {
  color: black;
  border: 3px solid;
  height: 10px;
  width: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etch-a-Sketch</title>
  <link type="text/css" rel="stylesheet" href="styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div id="colorContainer">
    <input type="radio" id="blackchoice" value="color" name="black" class="defaultbtn">
    <label for="defaultcolor">black</label>
    <input type="radio" id="randomgen" class="hey">
    <label for="randomchoice">random</label>
  </div>

  <div id="changeGrid">
    <button id="clear">clear</button>
  </div>

  <div id="mainGrid"></div>

  <script src="app.js"></script>
</body>

</html>

Answer 1

几个相关的问题：

变量框未定义。看起来好像必须是带有类框的集合元素。当它被定义时，这确实完成了，但随后被附加到它的 forEach 取消定义。把这两个东西分开，box就会变成所有带有box类的元素的集合。

然后，当单击清除时，您需要逐个遍历这些框，使其背景颜色为白色，因此再次使用 forEach。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etch-a-Sketch</title>
  <link type="text/css" rel="stylesheet" href="styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    #mainGrid {
      display: grid;
      justify-content: center;
      align-items: center;
      grid-template-columns: repeat(16, 1fr);
      grid-template-rows: auto;
      margin-left: 150px;
      width: 200px;
    }
    
    .box {
      color: black;
      border: 3px solid;
      height: 10px;
      width: 10px;
    }
  </style>
</head>

<body>
  <div id="colorContainer">
    <input type="radio" id="blackchoice" value="color" name="black" class="defaultbtn">
    <label for="defaultcolor">black</label>
    <input type="radio" id="randomgen" class="hey">
    <label for="randomchoice">random</label>

  </div>

  <div id="changeGrid">
    <button id="clear">clear</button>

  </div>


  <div id="mainGrid"></div>

  <script src="app.js"></script>
  <script>
    const containerGrid = document.getElementById("mainGrid");

    function makeGrid(col) {
      for (let i = 0; i < col * col; i++) {
        const gridAdd = document.createElement("div");
        gridAdd.classList.add("box");
        gridAdd.textContent = "";

        containerGrid.appendChild(gridAdd);
      }
    }

    makeGrid(16); // make grid 16*16


    const btnClear = document.getElementById("clear");
    //mouseover event black - need to link to button (well done :)
    const boxes = document.querySelectorAll('.box');
    boxes.forEach(box => {
      box.addEventListener('mouseover', event => {
        box.style.backgroundColor = "black";
      })
    });




    btnClear.addEventListener("click", () => {
      boxes.forEach(box => {
        box.style.backgroundColor = "white";
      });
    });





    const changeGrid = document.getElementById(".sizechange");




    /*clearBtn.forEach.addEventListener("click", function () {
    clearBtn.style.color ="white";
    });
    */


    /*const randomBtn = document.getElementById("randomgen").addEventListener('click',(e) => {
        console.log(this.classname)    
        console.log(e.currentTarget === this)
        }) */
    //change color
  </script>
</body>

</html>

Answer 2

• 简化您的 CSS
• 为您的颜色使用 SELECT 元素
• 在 JS 中定义 gridTemplateColumns，而不是在 CSS 中。
• 使用更简单的函数
• 使用全局变量存储当前网格size和color
• 不要忘记在更改大小之前清除网格
• 在创建时为每个单元分配mouseenter 事件！
• 添加布尔变量isPenDown 以获得更好的用户体验！

const NewEL = (sel, prop) => Object.assign(document.createElement(sel), prop);

const EL_grid = document.querySelector("#grid");
const EL_clear = document.querySelector("#clear");

const EL_color = document.querySelector("[name=color]");
const EL_size = document.querySelector("[name=size]");

let size = parseInt(EL_size.value, 10);
let color = "black";
let isPenDown = false;

function makeGrid() {
  EL_grid.innerHTML = ""; // Clear current grid!
  for (let i = 0; i < size ** 2; i++) {
    EL_grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
    EL_grid.append(NewEL("div", {
      className: "box",
      onmousedown()  { isPenDown = true; paint(this); },
      onmouseup()    { isPenDown = false; },
      onmouseenter() { if (isPenDown) paint(this); },
    }));
  }
};

function paint(EL) {
  EL.style.backgroundColor = color;  
}

EL_clear.addEventListener("click", () => {
  const tmp_color = color; // Remember current color
  color = "transparent";   // Temporarily set it to transparent
  EL_grid.querySelectorAll(".box").forEach(paint); // Paint all cells as transparent
  color = tmp_color;       //* Reset as it was before.
});

EL_color.addEventListener("change", () => {
  color = EL_color.value;
  if (color === "random") color = `hsl(${~~(Math.random() * 360)}, 80%, 50%)`;
});

EL_size.addEventListener("change", () => {
  size = parseInt(EL_size.value, 10);
  makeGrid();
});

// INIT!
makeGrid();

#grid {
  display: inline-grid;
  margin: 10px 0;
}

#grid .box {
  border: 1px solid;
  height: 10px;
  width: 10px;
  margin: 0;
  user-select: none;
}

<div>
  <label>
    Size:
    <input type="number" name="size" value="16">
  </label>
  
  <label>
    Color:
    <select name="color">
      <option value="black">black</option>
      <option value="white">white</option>
      <option value="red">red</option>
      <option value="yellow">yellow</option>
      <option value="orange">orange</option>
      <option value="fuchsia">fuchsia</option>
      <option value="transparent">CLEAR (transparent)</option>
      <option value="random">RANDOM COLOR</option>
    </select>
  </label>
  
  <button id="clear">Clear canvas</button>
</div>


<div id="grid"></div>