javascript - 我的简单按钮给出了错误的颜色数量

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 5 年前。

当我单击 mt 'Easy' btn 时，它应该给我 3 种颜色的输出，它给我像我的 'hard' btn 一样的 6 种颜色(也在控制台中我得到 6 种颜色。

我的 JS 的一部分:

var modeBtn = document.querySelectorAll(".mode");
for (var i = 0; i < modeBtn.length; i++) {
  modeBtn[i].addEventListener("click", function() {
    modeBtn[0].classList.remove("selected");
    modeBtn[1].classList.remove("selected");
    this.classList.add("selected");

    //The short way - This called "the ternary oprator"
    /*
        this.textContent === "Easy" ? numSquares = 3: numSquares = 6;
        */
    //The longer  Way
    if (this.textContent === "easy") {
      numSquares = 3;
    } else {
      numSquares = 6;
    }
  });
}

<div id="stripe">
  <button id="reset">New Colors</button>
  <span id="message"></span>
  <button class="mode">Easy</button>
  <button class="mode selected">Hard</button>
</div>

这是我的完整代码 Codepen

Answer 1

我调试了代码，发现问题出在init()方法中的i的值上。

加载文档后，init() 方法将事件监听器添加到两个按钮:Easy 和 Hard。当i的值变为2时，循环终止。

单击按钮时，由于 i 被声明为 var，这会在函数级别而不是 block 级别创建作用域，因此 this. textContent 实际上尝试访问 modeBtn[2] 的值，该值是未定义的。

因此，解决方案是将变量i声明为let。这绝对能解决您的问题。

引用此link了解更多详情。