javascript - 为什么更改网格大小后按钮功能不起作用？

Question

首次运行程序时，按钮功能按预期工作。

但是在通过范围滑块更改网格大小后，按钮功能都不再起作用了......

为什么更改网格大小后按钮功能不再起作用？我的算法中缺少什么？

我将不胜感激任何建议。

"use strict";

const divContainer = document.querySelector(".container");
const btnsContainer = document.querySelector(".buttons");
const btnBlack = document.createElement("button");
const btnGreyScale = document.createElement("button");
const btnRgb = document.createElement("button");
const btnErase = document.createElement("button");
const btnShake = document.createElement("button");

const input = document.querySelector("input");
const outputs = document.querySelectorAll("output");
let slider = document.getElementById("gridSize");

const body = document.querySelector("body");
document.body.ondragstart = () => { return false };

function createGrid(col, rows) {
  for (let i = 0; i < (col * rows); i++) {
      const div = document.createElement("div");
      divContainer.style.gridTemplateColumns = `repeat(${col}, 1fr)`;
      divContainer.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
      divContainer.appendChild(div).classList.add("box");
  }
}
createGrid(50,50);

let isDrawing = false;
window.addEventListener("mousedown", () => {
    isDrawing = true;
});
window.addEventListener("mouseup", () => {
    isDrawing = false;
});

function paintBlack() { 
  const boxes = divContainer.querySelectorAll(".box");
  btnBlack.textContent = "Black";
  btnBlack.addEventListener("click", function () {
    boxes.forEach(box => box.addEventListener("mousemove", function () {
      if (isDrawing) {this.style.background = "#000"};
    }))
  })
  btnsContainer.appendChild(btnBlack).classList.add("btn", "blackBtn");
}
paintBlack();

function paintGreyScale() { 
  const boxes = divContainer.querySelectorAll(".box");
  btnGreyScale.textContent = "Grey";
  btnGreyScale.addEventListener("click", function () {
    boxes.forEach(box => box.addEventListener("mousemove", function () {
      let randNum = Math.floor(Math.random() * 256);
      let grayScale = `rgb(${randNum},${randNum},${randNum})`;
      if (isDrawing) {this.style.background = grayScale};
    }))
  })
  btnsContainer.appendChild(btnGreyScale).classList.add("btn", "greyBtn");
}
paintGreyScale();

function paintRgb() { 
  const boxes = divContainer.querySelectorAll(".box");
  btnRgb.textContent = "Rainbow";
  btnRgb.addEventListener("click", function () {
    boxes.forEach(box => box.addEventListener("mousemove", function () {
      let r = Math.floor(Math.random() * 256);
      let g = Math.floor(Math.random() * 256);
      let b = Math.floor(Math.random() * 256);
      const rgb = `rgb(${r},${g},${b})`;
      if (isDrawing) {this.style.background = rgb};
    }))
  })
  btnsContainer.appendChild(btnRgb).classList.add("btn", "rainbowBtn");
}
paintRgb();

function erase() { 
  const boxes = divContainer.querySelectorAll(".box");
  btnErase.textContent = "Erase";
  btnErase.addEventListener("click", function () {
    boxes.forEach(box => box.addEventListener("mousemove", function () {
      if (isDrawing) {this.style.background = "#FFF"};
    }))
  })
  btnsContainer.appendChild(btnErase).classList.add("btn", "eraseBtn");
}
erase();

function clearCanvas() { 
  const boxes = divContainer.querySelectorAll(".box");
  btnShake.textContent = "Shake it!";
  btnShake.addEventListener("click", function () {
    boxes.forEach(box => box.style.backgroundColor = "#FFF");
  })
  btnsContainer.appendChild(btnShake).classList.add("btn", "clearCanvasBtn", "shake");
}
clearCanvas();

btnShake.addEventListener("click", clearCanvas);

input.addEventListener("input", () => {
  for (let output of outputs) {
    output.innerText = input.value;
  }
})

function modifyGridSize() {
  let boxes = divContainer.querySelectorAll(".box");
  boxes.forEach(box => box.remove());
  createGrid(slider.value, slider.value);
}

slider.addEventListener("mouseup", modifyGridSize);

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  background: linear-gradient(to bottom, #1488CC, #2B32B2);
  color: #FFF;
  line-height: 1.5;
  height: 100vh;
}

#wrapper {
  display: grid;
  grid-template-areas: "buttons container";
  grid-auto-columns: 50% 50%;
}

.container {
  width: 515px;
  height: 515px;
  display: grid;
  background-color: #FFF;
  box-shadow: 0 0 10px;
}

.box {
  border: .5px solid #808080;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  gap: 10px;
}

.btn {
  width: 200px;
  height: 50px;
  font-family : inherit;
  font-size: 2rem;
  font-weight: bold;
  color: #000;
}

.btn:hover {
  box-shadow: 0 0 10px;
}

.btn:active {
  box-shadow: inset 0 0 8px;
}

.blackBtn {
  background: #000;
  color: #4C4C4C;
}

.greyBtn {
  background: linear-gradient(to right, #BDC3C7, #2C3E50);
}

.rainbowBtn {
  background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
}

.eraseBtn {
  background: #FFF;
}

.clearCanvasBtn {
  background: #FF0000;
}

.shake {
  animation: shake .5s linear 1;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

#wrapper label {
  font-size: 2rem;
}

.gridDimension {
  font-size: 1.5rem;
  text-align: center;
}

input[type="range"] {
  margin-bottom: 40px;
}

<!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, shrink-to-fit=no">
    <title>Etch-A-Sketch</title>
    <link rel="stylesheet" type="text/css" href="src/css/etchAsketch.css">
  </head>

  <body>

      <main id="wrapper">
        <div class="buttons">
          <label for="gridSize">Select Grid Size:</label>
          <div class="gridDimension"><output>50</output> x <output>50</output></div>
          <input id="gridSize" type="range" name="gridSize" value="50" step="1" min="1" max="100">
        </div>
        <div class="container"></div>
      </main>

    <script src="etchAsketch.js"></script>

  </body>

</html>

标签： javascriptalgorithm

Answer 1

我刚刚移动了 creategrid 下的所有事件逻辑，它可以工作

"use strict";

const divContainer = document.querySelector(".container");
const btnsContainer = document.querySelector(".buttons");
const btnBlack = document.createElement("button");
const btnGreyScale = document.createElement("button");
const btnRgb = document.createElement("button");
const btnErase = document.createElement("button");
const btnShake = document.createElement("button");

const input = document.querySelector("input");
const outputs = document.querySelectorAll("output");
let slider = document.getElementById("gridSize");

const body = document.querySelector("body");
document.body.ondragstart = () => { return false };

function createGrid(col, rows) {
  for (let i = 0; i < (col * rows); i++) {
      const div = document.createElement("div");
      divContainer.style.gridTemplateColumns = `repeat(${col}, 1fr)`;
      divContainer.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
      divContainer.appendChild(div).classList.add("box");
  }
  paintBlack();
  paintGreyScale();
  paintRgb();
  erase();
  clearCanvas();
}


let isDrawing = false;
window.addEventListener("mousedown", () => {
    isDrawing = true;
});
window.addEventListener("mouseup", () => {
    isDrawing = false;
});

function paintBlack() { 
  const boxes = divContainer.querySelectorAll(".box");
  btnBlack.textContent = "Black";
  btnBlack.addEventListener("click", function () {
    boxes.forEach(box => box.addEventListener("mousemove", function () {
      if (isDrawing) {this.style.background = "#000"};
    }))
  })
  btnsContainer.appendChild(btnBlack).classList.add("btn", "blackBtn");
}


function paintGreyScale() { 
  const boxes = divContainer.querySelectorAll(".box");
  btnGreyScale.textContent = "Grey";
  btnGreyScale.addEventListener("click", function () {
    boxes.forEach(box => box.addEventListener("mousemove", function () {
      let randNum = Math.floor(Math.random() * 256);
      let grayScale = `rgb(${randNum},${randNum},${randNum})`;
      if (isDrawing) {this.style.background = grayScale};
    }))
  })
  btnsContainer.appendChild(btnGreyScale).classList.add("btn", "greyBtn");
}


function paintRgb() { 
  const boxes = divContainer.querySelectorAll(".box");
  btnRgb.textContent = "Rainbow";
  btnRgb.addEventListener("click", function () {
    boxes.forEach(box => box.addEventListener("mousemove", function () {
      let r = Math.floor(Math.random() * 256);
      let g = Math.floor(Math.random() * 256);
      let b = Math.floor(Math.random() * 256);
      const rgb = `rgb(${r},${g},${b})`;
      if (isDrawing) {this.style.background = rgb};
    }))
  })
  btnsContainer.appendChild(btnRgb).classList.add("btn", "rainbowBtn");
}


function erase() { 
  const boxes = divContainer.querySelectorAll(".box");
  btnErase.textContent = "Erase";
  btnErase.addEventListener("click", function () {
    boxes.forEach(box => box.addEventListener("mousemove", function () {
      if (isDrawing) {this.style.background = "#FFF"};
    }))
  })
  btnsContainer.appendChild(btnErase).classList.add("btn", "eraseBtn");
}


function clearCanvas() { 
  const boxes = divContainer.querySelectorAll(".box");
  btnShake.textContent = "Shake it!";
  btnShake.addEventListener("click", function () {
    boxes.forEach(box => box.style.backgroundColor = "#FFF");
  })
  btnsContainer.appendChild(btnShake).classList.add("btn", "clearCanvasBtn", "shake");
}


btnShake.addEventListener("click", clearCanvas);

input.addEventListener("input", () => {
  for (let output of outputs) {
    output.innerText = input.value;
  }
})

function modifyGridSize() {
  let boxes = divContainer.querySelectorAll(".box");
  boxes.forEach(box => box.remove());
  createGrid(slider.value, slider.value);
}

slider.addEventListener("mouseup", modifyGridSize);
createGrid(50,50);

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  background: linear-gradient(to bottom, #1488CC, #2B32B2);
  color: #FFF;
  line-height: 1.5;
  height: 100vh;
}

#wrapper {
  display: grid;
  grid-template-areas: "buttons container";
  grid-auto-columns: 50% 50%;
}

.container {
  width: 515px;
  height: 515px;
  display: grid;
  background-color: #FFF;
  box-shadow: 0 0 10px;
}

.box {
  border: .5px solid #808080;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  gap: 10px;
}

.btn {
  width: 200px;
  height: 50px;
  font-family : inherit;
  font-size: 2rem;
  font-weight: bold;
  color: #000;
}

.btn:hover {
  box-shadow: 0 0 10px;
}

.btn:active {
  box-shadow: inset 0 0 8px;
}

.blackBtn {
  background: #000;
  color: #4C4C4C;
}

.greyBtn {
  background: linear-gradient(to right, #BDC3C7, #2C3E50);
}

.rainbowBtn {
  background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
}

.eraseBtn {
  background: #FFF;
}

.clearCanvasBtn {
  background: #FF0000;
}

.shake {
  animation: shake .5s linear 1;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

#wrapper label {
  font-size: 2rem;
}

.gridDimension {
  font-size: 1.5rem;
  text-align: center;
}

input[type="range"] {
  margin-bottom: 40px;
}

<!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, shrink-to-fit=no">
    <title>Etch-A-Sketch</title>
    <link rel="stylesheet" type="text/css" href="src/css/etchAsketch.css">
  </head>

  <body>

      <main id="wrapper">
        <div class="buttons">
          <label for="gridSize">Select Grid Size:</label>
          <div class="gridDimension"><output>50</output> x <output>50</output></div>
          <input id="gridSize" type="range" name="gridSize" value="50" step="1" min="1" max="100">
        </div>
        <div class="container"></div>
      </main>

    <script src="etchAsketch.js"></script>

  </body>

</html>