为什么范围滑块的值不适用于 div 容器？

编程问答 2022-08-26

问题描述

我正在尝试通过 JavaScript 使用范围滑块动态更改 div 容器的网格大小。

但是一旦 mouseup 事件处理程序触发，范围滑块的值将不会应用于 div 容器。为什么范围滑块的值不适用于 div-container？

我错过了什么？需要一些帮助请...

"use strict";

const divContainer = document.querySelector(".container");
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);

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.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: 510px;
  height: 510px;
  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);
  }
  20%,80% {
    transform: translate3d(2px,0);
  }
  30%,50%,70% {
    transform: translate3d(-4px,0);
  }
  40%,60% {
    transform: translate3d(4px,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>

解决方法

createGrid 接受两个参数，col 和 rows。您只传递了一个参数 (col)。

这会导致您的 for 循环 (for (let i = 0; i < (col * rows); i++)) 永远不会执行，因为此语句：i < (col * rows) 始终返回 false。

这是因为 col * undefined 返回 undefined,thus causing number comparisons to return false。

改为使用：

createGrid(slider.value,slider.value);

演示：

"use strict";

const divContainer = document.querySelector(".container");
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);

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: 510px;
  height: 510px;
  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);
  }
  20%,80% {
    transform: translate3d(2px,0);
  }
  30%,50%,70% {
    transform: translate3d(-4px,0);
  }
  40%,60% {
    transform: translate3d(4px,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>

htmljavascriptrangeslider

相关问答

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其...
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。...
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbc...