切换至Hard模式时首次点击无法添加.square类的解决方法

Hey there, let's fix that annoying double-click issue with your Hard mode button! The problem here is that your current code only handles removing the .square class from the bottom 3 squares when switching to Easy mode, but never adds that class back when switching back to Hard mode. Here's how to fix it step by step:

Step 1: Grab All Square Elements Upfront #

First, make sure you're capturing all 6 square elements from the start (not just those with the .square class, since that list changes when you switch modes). Use this line to get your squares:

var squares = document.querySelectorAll("#container div"); // Gets all 6 divs in the container

Step 2: Update the Mode Button Logic #

Modify your setupModeButtons function to explicitly add the .square class back when Hard mode is selected. We'll also clean up the button selection state to avoid repeated code:

function setupModeButtons() {
  for (var i = 0; i < modeButtons.length; i++) {
    modeButtons[i].addEventListener("click", function() {
      // Reset selected state for all buttons first
      modeButtons[0].classList.remove("selected");
      modeButtons[1].classList.remove("selected");
      this.classList.add("selected");

      if (this.textContent === "Easy") {
        numSquares = 3;
        // Hide bottom 3 squares by removing the .square class
        for (var i = 3; i < squares.length; i++) {
          squares[i].classList.remove("square");
        }
      } else { // Hard mode is selected
        numSquares = 6;
        // Show bottom 3 squares by adding back the .square class
        for (var i = 3; i < squares.length; i++) {
          squares[i].classList.add("square");
        }
      }
      // Reset the game to generate new colors and update square visuals
      reset(); // Ensure your reset() function handles updating all visible squares
    });
  }
}

Why This Works: #

• We moved the button selection state logic to the top so it's reused for both modes, keeping the code clean and DRY.
• When switching to Hard mode, we explicitly loop through the bottom 3 squares and add the .square class back—this fixes the "first click does nothing" issue because the squares are immediately re-styled to be visible.
• Calling reset() after switching modes ensures that all visible squares (including the newly re-enabled bottom 3) get fresh colors and are ready for play.

Quick Reset Function Check #

Make sure your reset() function is set up to handle all squares correctly, regardless of their current class. For example:

function reset() {
  // Generate new colors based on current mode
  colors = generateRandomColors(numSquares);
  // Pick the target RGB color for the round
  pickedColor = pickColor();
  // Update each square's appearance
  for (var i = 0; i < squares.length; i++) {
    if (colors[i]) {
      squares[i].style.backgroundColor = colors[i];
      // Ensure visibility matches the current mode
      squares[i].classList.toggle("square", i < numSquares);
    }
  }
}

This extra check in the reset function acts as a safety net to ensure square visibility always aligns with the selected mode.

内容的提问来源于stack exchange，提问作者LED Fantom