Question

我正在写一个提供RGB颜色的简单游戏，即。 rgb（247,237,237），并要求玩家选择具有最接近匹配颜色的正方形。默认模式是硬模式，有6个彩色方块，简易模式有3个方格。所以最初每个方格<div class="square"></div>使用.square css类来设置样式。（参见下面的.html文件）

所以在我开始游戏之后，我点击了Easy模式，我的代码被移除.square css类用于底部的3个方块。但是，当我从简易模式更改为硬模式时，我需要单击“硬”模式按钮“两次”才能工作。我发现它是b / c .square css类只在点击“第二”时才添加。我的问题：我第一次点击硬模式时如何添加.square类？（参见下面的.js文件标记为：// ===＆gt; QUESTION）

.html文件：

<div id="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

.js文件：

function setupModeButtons() {
  for (var i = 0; i < modeButtons.length; i++) {
    modeButtons[i].addEventListener("click", function() {
      // If "Easy" Button is clicked,
      if (this.textContent === "Easy") {
        numSquares = 3
        modeButtons[0].classList.remove("selected");
        modeButtons[1].classList.remove("selected");
        this.classList.add("selected");

        // Remove the original bottom 3 squares
        for (var i = 3; i < colors.length; i++) {
          squares[i].classList.remove("square");
        }
        // Reset the top 3 squares
        colors = [];
        generateRandomColors(3);
        pickedColor = pickColor();
        setupSquares();
      } 

      // If "Hard" Button is clicked,
      if (this.textContent === "Hard") {
        numSquares = 6;
        modeButtons[0].classList.remove("selected");
        modeButtons[1].classList.remove("selected");
        this.classList.add("selected");

        // Add bottom 3 squares
        for (var i = 3; i < colors.length; i++) {
          squares[i].classList.add("square"); // ===> QUESTION
        }
        generateRandomColors(6);
        pickedColor = pickColor();
        setupSquares();
      } 

    }); // End of AddEventListener()
  }
}

Answer 1

我认为generateRandomColors填充了colors数组：您的问题是

generateRandomColors(6);

在

后运行
// Add bottom 3 squares for (var i = 3; i < colors.length; i++) {

所以当Easy上只有3种颜色时，for循环在第一次点击按钮时根本不会运行。

只需将其更改为：

generateRandomColors(6); // Add bottom 3 squares for (var i = 3; i < colors.length; i++) { squares[i].classList.add("square"); // ===> QUESTION }

Answer 2

我假设 generateRandomColors（n）创建 n 随机数并将它们存储在 colors 中。因此，当您在Easy模式后第一次单击Hard模式时，colors.length为3，因此中的代码（var i = 3; i＆lt; colors.length; i ++）赢了＆＃39 ; t执行。将其更改为 squares.length

在第二个按钮单击之前，不会添加.css类

2 个答案: