颜色切换脚本失效请求：点击按钮无法将白色盒子转为红色

核心问题1：元素选择逻辑错误 #

你的JS代码中使用document.getElementById(color)获取目标元素，但HTML里的白色盒子仅设置了class="color"，没有添加id="color"属性。getElementById仅匹配元素的id属性，因此永远无法找到要修改的盒子，导致颜色变更失效。

修复方法：给目标div补充id属性，修改后的HTML代码片段：

<div class="color" id="color">
  <p class="header">Color Box</p>
</div>

核心问题2：脚本未正确引入到HTML #

你的HTML代码里没有包含引入colorScript.js的标签，浏览器无法加载并执行你的JS逻辑。

修复方法：在HTML的</body>闭合标签前添加脚本引入语句（确保colorScript.js与HTML文件在同一目录下）：

<script src="colorScript.js"></script>

额外优化建议 #

• 将变量value改为更语义化的名称（比如isBoxRed），提升代码可读性
• 可以扩展按钮的切换功能，实现点击一次变红、再点击变回白色，修改后的JS代码：

let isBoxRed = false;

function setColor(colorId) {
  const targetBox = document.getElementById(colorId);
  if (!isBoxRed) {
    targetBox.style.backgroundColor = "rgb(255, 0, 0)";
    isBoxRed = true;
  } else {
    targetBox.style.backgroundColor = "white";
    isBoxRed = false;
  }
}

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