编程新手求助：如何通过JavaScript布尔变量激活红绿灯对应CSS样式

Hey there! Let's get your traffic light working properly. The issue with your current JavaScript is that you're trying to access CSS classes like they're DOM element properties (which isn't how it works). Instead, we need to manipulate the element's class list to activate those styles. Here's a step-by-step fix:

Core Concept #

Your CSS already defines the active styles with .circle.red, .circle.yellow, and .circle.green. We just need to add/remove these classes based on your boolean variables.

Fixed JavaScript Solution #

First, we'll define boolean variables for each light, grab the DOM elements, and create a reusable function to update their states:

// Define boolean variables to control each light
let isRedOn = true;
let isYellowOn = false;
let isGreenOn = false;

// Get references to each traffic light element
const redLight = document.getElementById('redposition');
const yellowLight = document.getElementById('yellowposition');
const greenLight = document.getElementById('greenposition');

// Function to update all lights based on the boolean variables
function updateTrafficLights() {
  // Toggle the 'red' class: add if isRedOn is true, remove if false
  redLight.classList.toggle('red', isRedOn);
  // Same logic for yellow and green
  yellowLight.classList.toggle('yellow', isYellowOn);
  greenLight.classList.toggle('green', isGreenOn);
}

// Call the function once to set the initial state
updateTrafficLights();

What's Different? #

• classList.toggle(className, condition) is a handy method that adds the class if the condition is true, and removes it if false—perfect for this use case!
• Your original code tried x.circle.red = "red" which doesn't work because circle is a CSS class, not a property of the DOM element.

Full Working Example #

To make sure everything loads correctly, place your script at the end of the <body> tag (so the DOM elements exist before we try to access them). Here's the complete HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Traffic light</title>
<link rel="stylesheet" href="mystyle.css">
<link rel="stylesheet" href="switch.css" type="text/css" media="screen" />
</head>
<body>
<div class="pos5">
<div class="trafficlight">
<div class="circle" id="redposition"></div>
<div class="circle" id="yellowposition"></div>
<div class="circle" id="greenposition"></div>
</div>
</div>

<script>
let isRedOn = true;
let isYellowOn = false;
let isGreenOn = false;

const redLight = document.getElementById('redposition');
const yellowLight = document.getElementById('yellowposition');
const greenLight = document.getElementById('greenposition');

function updateTrafficLights() {
  redLight.classList.toggle('red', isRedOn);
  yellowLight.classList.toggle('yellow', isYellowOn);
  greenLight.classList.toggle('green', isGreenOn);
}

updateTrafficLights();

// Optional: Simulate automatic traffic light cycle for testing
setTimeout(() => {
  isRedOn = false;
  isYellowOn = true;
  updateTrafficLights();
}, 2000);

setTimeout(() => {
  isYellowOn = false;
  isGreenOn = true;
  updateTrafficLights();
}, 4000);

setTimeout(() => {
  isGreenOn = false;
  isYellowOn = true;
  updateTrafficLights();
}, 6000);

setTimeout(() => {
  isYellowOn = false;
  isRedOn = true;
  updateTrafficLights();
}, 8000);
</script>
</body>
</html>

Bonus Tips #

• If you need to trigger the light changes based on user actions (like a button click), just update the boolean variables and call updateTrafficLights() again.
• The optional timeout code simulates a real traffic light cycle—you can remove it if you want manual control.

内容的提问来源于stack exchange，提问作者Marius-Cornel