交通灯手动切换功能故障求助：仅黄灯可响应点击操作

Hey there! Let's dig into why your red and green traffic lights aren't responding when the main button is active, while the yellow one works perfectly. Here are the most likely culprits and fixes to get all lights behaving as expected:

First up, it's super common to have typos in selectors that leave red/green lights out of the event binding loop. For example, if you used .yellow-light for the yellow bulb but accidentally wrote .redlight (missing the hyphen) for the red one, your JS won't find it.

To debug this:

• Open your browser's dev tools (F12), head to the Elements tab, and confirm the class/ID names on your red and green light elements match exactly what's in your JavaScript.
• Add quick console.log checks to verify your JS is actually grabbing the elements:

const redLight = document.querySelector('.red-light');
const greenLight = document.querySelector('.green-light');
console.log(redLight, greenLight); // If either logs `null`, your selector is wrong!

It sounds like you only have the click event attached to the yellow light right now. Instead of writing separate code for each bulb, use a batch approach to bind/unbind events when the main button toggles:

Here's a clean example of how to handle this:

const mainToggle = document.getElementById('main-button');
const allLights = document.querySelectorAll('.traffic-light'); // Give all bulbs this shared class

// Reusable function to toggle a light's color
function toggleLightColor(e) {
  const light = e.target;
  // Clear all existing color classes
  light.classList.remove('red', 'yellow', 'green');
  
  // Cycle through colors (adjust this logic to match your desired behavior)
  if (light.classList.contains('last-red')) {
    light.classList.add('green');
    light.classList.remove('last-red');
    light.classList.add('last-green');
  } else if (light.classList.contains('last-yellow')) {
    light.classList.add('red');
    light.classList.remove('last-yellow');
    light.classList.add('last-red');
  } else {
    light.classList.add('yellow');
    light.classList.remove('last-green');
    light.classList.add('last-yellow');
  }
}

mainToggle.addEventListener('click', () => {
  const isActive = mainToggle.classList.toggle('active');
  
  allLights.forEach(light => {
    if (isActive) {
      // Turn lights on and enable clicks
      light.classList.remove('off');
      light.addEventListener('click', toggleLightColor);
      light.style.pointerEvents = 'auto';
    } else {
      // Turn lights off and disable clicks
      light.classList.add('off');
      light.removeEventListener('click', toggleLightColor);
      light.style.pointerEvents = 'none';
      // Reset all color states
      light.classList.remove('red', 'yellow', 'green', 'last-red', 'last-yellow', 'last-green');
    }
  });
});

Key notes here:

• Using querySelectorAll lets you handle all lights in one loop, no repeated code.
• Always pair addEventListener with removeEventListener when toggling state to avoid duplicate event triggers.
• The last-* classes help track the current color of each bulb for consistent cycling.

Sometimes CSS can silently block clicks on elements. If your red/green lights have pointer-events: none set (either directly or via a parent class), they won't register clicks at all.

Fix this by adjusting your CSS or toggling the property in JS:

/* Default state (main button off) */
.traffic-light {
  pointer-events: none;
}

/* When main button is active, enable clicks */
.main-button.active ~ .traffic-light-container .traffic-light {
  pointer-events: auto;
}

Or handle it in your JS toggle logic like the example above—whichever fits your setup better.

If your existing toggle function only checks for the yellow light's state, red and green won't know how to switch. Make sure your function handles all three color states, just like the example above.

If you've tried all these steps and still have issues, share your full HTML, CSS, and JS code snippet—we can dive deeper into the specifics!

内容的提问来源于stack exchange，提问作者front-end-performer