单击另一支笔后，JavaScript Etch-a-Sketch 着色笔停止增加不透明度

Question

我正在创建一个 Etch-a-Sketch for The Odin Project使用 HTML、CSS 和 JavaScript。我在使用“着色笔”的 JavaScript 时遇到了一些困难。

注意:这个问题中描述的“笔”不要与代码笔混淆。

有两支笔:黑色笔将单元格变成黑色，着色笔在第一次通过时将单元格变成黑色，但将不透明度更改为 0.1，使其几乎透明。这会产生轻微变暗的错觉，因为单元格后面的背景与单元格的原始颜色相同。在随后每次使用着色笔通过后，不透明度都会增加 0.1。

着色器笔是默认笔。起初它工作正常，但是当我单击黑色笔然后返回着色笔时，着色笔会增加一次不透明度并停止。它还会覆盖黑色单元格。

这是我设置笔的方法:

makeGrid(16); // generate grid
pen("shader"); // default pen: shader

document.querySelector('#black').addEventListener("click", e => pen("black"));
document.querySelector('#shader').addEventListener("click", e => pen("shader"));

function pen(selected) {
  let cells = document.querySelectorAll('div.cell');
  cells.forEach(cell => {
    cell.addEventListener('mouseover', function(e) {
      if (selected == "black") {
        // turns cell black
        cell.classList.remove('shade');
        cell.style.backgroundColor = '#101010';
        cell.style.opacity = '1';
        console.log('Make cell black')
      } else if (selected == "shader") {
        let opacity = cell.style.opacity;
        if (cell.classList.contains("shade")) {
          // increases opacity by 0.1
          cell.style.opacity = (Number(opacity) + 0.1);
          console.log('If there is shade, increase opacity.')
        } else {
          // turns cell to 0.1 opacity
          cell.classList.add('shade');
          cell.setAttribute('style', 'opacity:0.1');
          cell.style.backgroundColor = '#101010';
          console.log('Else, add shade class.')
        }
      }
    })
  });
}

我在每个条件 block 中使用 console.log 语句运行此代码，当我返回使用着色器笔时，看起来黑笔仍在运行。我最好的猜测是这就是导致问题的原因，但我不确定如何解决它。

我创建了一个 CodePen与其余代码一起使用，以便您可以看到它的实际效果。如前所述，默认笔是着色器。一开始它按预期工作，但在选择黑色笔后它就停止了。

如有任何帮助或指导，我们将不胜感激。

Answer 1

你的代码有很多问题，主要的一个是当你改变笔类型时(当你调用 pen() 函数时)你添加了一个新的 mouseover事件监听器。

让我们来看看

您的代码首先调用 pen('shader') 使 shader 成为默认笔类型

pen("shader"); 

让我们看看pen()定义

function pen(selected) {
  let cells = document.querySelectorAll('div.cell');
  cells.forEach(cell => {    
    cell.addEventListener('mouseover', function(e){     
       ...
    })  
  });
}

事件监听器获取字符串 shader 并在其上关闭 (这称为 closure ) 现在每当您将鼠标悬停在单元格上时笔类型将是 shader

现在，当您选择黑笔时，您会再次调用函数 pen()，添加一组新的事件监听器。

这不会用新的替换旧的事件监听器，它会将它们堆叠在一起，就像一个接一个地调用两个函数一样。

现在，当您将鼠标悬停在一个单元格上时，第一个带有笔类型 shader 的事件监听器将触发，然后第二个带有黑色笔的事件监听器将在它之后触发，您可以在控制台中看到这一点看到从两个 if 语句条件打印的两条消息。

现在，当您再次选择 shader 时，您添加了一组新的带有着色笔类型的事件监听器，第一个事件监听器将触发设置不透明度为 0.1，然后是黑色事件监听器删除 shade 类然后第三个监听器再次检查单元格是否具有类 shade if(cell.classList.contains("shade"))，如果为假，则下降到最后一个 else 语句。

有很多方法可以解决这个问题，但鉴于您是初学者，我会给您一些简单的解决方案

• 首先让笔类型成为一个全局变量，然后在每个按钮上单击您更改它

• 其次在代码的开头向所有 cel 添加一个事件监听器，并让它们检查全局变量

演示

let penType = 'shader';

makeGrid(4); // generate grid


document.querySelector('#black').addEventListener("click", e => penType = "black");
document.querySelector('#shader').addEventListener("click", e => penType = "shader");



// generate grid
function makeGrid(dimension) {
  const canvas = document.querySelector('#canvas');
  const canvasWidth = document.getElementById("canvas").offsetWidth;
  const cellWidth = canvasWidth / dimension;

  for (let x = 1; x <= dimension * dimension; x++) {
    const makeCell = document.createElement('div');
    makeCell.classList.add('cell');
    canvas.appendChild(makeCell);
  };

  canvas.style.gridTemplateRows = `repeat(${dimension}, ${cellWidth}px [row-start]`;
  canvas.style.gridTemplateColumns = `repeat(${dimension}, ${cellWidth}px [column-start]`;


  // after all cells have been generated add the event listener
  // this is not the most optimize version of this but it gets the job done
  let cells = document.querySelectorAll('div.cell');
  cells.forEach(cell => {
    cell.addEventListener('mouseover', function(e) {
      console.log(penType)
      if (penType == "black") { // turns cell black
        cell.classList.remove('shade');
        cell.style.backgroundColor = '#101010';
        cell.style.opacity = '1';
        console.log('Make cell black')
      } else if (penType == "shader") { // turns cell 0.1
        let opacity = cell.style.opacity;
        if (cell.classList.contains("shade")) {
          cell.style.opacity = (Number(opacity) + 0.1);
          console.log('If there is shade, increase opacity.')
        } else {
          cell.classList.add('shade');
          cell.setAttribute('style', 'opacity:0.1');
          cell.style.backgroundColor = '#101010';
          console.log('Else, add shade class.')
        }
      }
    })
  });
}

body {
  margin: 0;
  background-color: #514c53;
  color: #fff;
  font-size: 18pt;
}


/* DIV STYLING */

#container {
  margin: 20px auto;
  max-width: 400px;
  display: flex;
  flex-wrap: wrap;
}

.full {
  width: 100%;
}

.left {
  width: 75%;
  margin-top: 15px;
}

.right {
  width: 25%;
  text-align: right;
}

#canvas {
  display: grid;
  flex-wrap: wrap;
  grid-template-rows: repeat(16, 30px [row-start]);
  grid-template-columns: repeat(16, 30px [col-start]);
  background: #e8dfd6;
}

.cell {
  background: #e8dfd6;
}


/* CELL SHADING */

.black {
  background-color: #101010;
}

.shade {
  background-color: #101010;
  width: 100%;
  height: 100%;
}


/* ELEMENT STYLING */

button {
  font-weight: 700;
  margin: 10px 0;
  background-color: #b9967d;
  color: #fff;
  padding: 0px 15px;
  text-shadow: 1px 1px #2e2e2e;
  box-shadow: 3px 3px #2e2e2e;
  border-radius: 5px;
  border: 0px;
  text-transform: uppercase;
  height: 30px;
  outline: none;
  transition: 0.3s;
}

button:hover {
  cursor: pointer;
  background-color: #aa8062;
  box-shadow: 0px -3px #2e2e2e;
}

button:active {
  background-color: #997963;
}

.circle {
  float: left;
  height: 15px;
  width: 15px;
  border: 1px solid #fff;
  border-radius: 50%;
  margin: 1px 5px 0 0;
}

.circle:hover {
  cursor: pointer;
  /*transition: 0.3s; 
  border: 2px solid #fff;*/
}

.meaning {
  float: left;
  font-size: .542em;
  text-transform: uppercase;
  padding-top: 2px;
  margin-right: 10px;
}

#black {
  background-color: #101010;
}

#shader {
  background-image: linear-gradient(#807b76, #dfd8d0);
}

<div id="container">
  <div class="left" style="margin-bottom:10px">
    <div class="circle" id="black"></div>
    <div class="meaning">Black</div>
    <div class="circle" id="shader"></div>
    <div class="meaning">Shader</div>
  </div>
  <div id="canvas" class="full">
    <!--grid generates here-->
  </div>
</div>
<!--container-->

您的逻辑有一个小问题，当您使用黑色笔时，您不必删除阴影类，因为当您返回阴影笔并将鼠标悬停在黑色单元格上时，它会将不透明度设置回 0.1