javascript - 如何使用 Var 创建一个切换来更改 Vanilla JS 中的状态

Question

我想用 vanilla JS 添加一个简单的点击切换，但我似乎遇到了困难。我创建了一个变量来在单击后更改函数的状态，但它似乎不起作用。我现在开始有点拔头发了。

这里有笔显示问题:https://codepen.io/emilychews/pen/dWByjx

代码在这里供快速引用:

HTML

<div class="box">Click Me</div>

CSS

.box {
font-family: arial;
letter-spacing: 1px;
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 200px;
background-color: blue;
color: white;
}

JS

var box = document.querySelectorAll('.box')[0];
var isBlue = true;

if (isBlue === true) {

  box.onclick = function() {

  box.style.background = 'red';
  isBlue = false;
  }  

} else {

  box.onclick = function() {

  box.style.background = 'blue';
  isBlue = true;
  }

}

任何帮助想法都会很棒。

艾米丽

Answer 1

您的测试 if (isBlue) 在开始时仅评估一次，并安装将颜色从蓝色更改为红色的 onclick 监听器。从那时起，同一个监听器将始终被执行，并将颜色设置为红色。

相反，将 if/else 逻辑放入函数内:

var box = document.querySelectorAll('.box')[0];
var isBlue = true;
box.onclick = function() {
  if (isBlue) {
    box.style.background = 'red';
    isBlue = false;
  }
  else {
    box.style.background = 'blue';
    isBlue = true;
  }
}