HTML/CSS/JS点击Start按钮切换浏览器背景色失效问题求助

现存代码错误点 #

• 元素选择器不匹配：HTML中按钮ID为btn1，JS中却使用getElementById("btn")获取元素，无法绑定点击事件
• 基础语法错误：所有函数定义处多写了右括号（function())为错误写法），JS解析时直接抛出语法错误，代码无法运行
• 定时器逻辑错误：三个setInterval为并行启动，不会按红→黄→绿的顺序等待执行，启动后5秒就会触发黄色切换，完全不符合时序要求
• HTML语法冗余：文件末尾重复写了</body>闭合标签
• CSS代码无效：定义的.red/.yellow/.green类样式从未被调用，属于冗余代码

修复后完整代码 #

HTML文件 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Traffic Light</title>
<link rel="stylesheet" href="TrafficLight.css">
</head>
<body>
<h1>Traffic Light</h1>
<div>
<button id="btn1">Start</button>
</div>
<script src="TrafficLightJS.js"></script>
</body>
</html>

JavaScript文件（TrafficLightJS.js） #

const btn = document.getElementById("btn1");
let timer = null;

// 交通灯切换逻辑
function runTrafficLight() {
  // 切红灯，保持30秒
  document.body.className = 'red';
  timer = setTimeout(() => {
    // 切黄灯，保持5秒
    document.body.className = 'yellow';
    timer = setTimeout(() => {
      // 切绿灯，保持30秒
      document.body.className = 'green';
      timer = setTimeout(() => {
        // 若要只执行1次，删掉下一行runTrafficLight()调用即可
        runTrafficLight();
      }, 30000);
    }, 5000);
  }, 30000);
}

btn.addEventListener("click", () => {
  // 点击时先清掉之前的定时器，避免重复点击启动多组切换
  if(timer) clearTimeout(timer);
  runTrafficLight();
});

CSS文件（TrafficLight.css） #

.red {
  background-color: red;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}

运行说明 #

• 点击Start按钮后立即触发切换，首先展示红灯30秒，之后自动切黄灯5秒，最后切绿灯30秒
• 默认配置下整套流程会循环执行，若只需要完整跑1次，删掉JS代码中绿色阶段里的runTrafficLight()调用即可
• 重复点击Start按钮不会叠加多组切换逻辑，会自动重置流程从头开始

内容的提问来源于stack exchange，提问作者Karan Kapoor