点击按钮选色后点击div改色无法重复触发的JavaScript问题

代码无法实现多次选色改色循环的核心问题：

• 操作div样式时仅使用classList.add()追加颜色类，从未移除旧的颜色类。第一次给div加上green类后，即使后续选中红色，green类仍残留在div的class列表中，会和新加的red类产生样式冲突，无法正常切换
• 原代码在<style>标签结束后多余了一个</head>标签，属于HTML语法错误，可能引发部分浏览器的解析异常
• 未对初始未选颜色的空状态做兼容，首次进入页面未点选颜色按钮时点击div无任何反馈

修改目标div的点击事件逻辑：每次给div加新颜色类前，先移除全部已存在的颜色类，再追加当前选中的颜色对应类名，同时修正HTML结构的语法错误即可。

核心修改的事件代码片段：

change.addEventListener("click", () => { 
  // 移除已有的所有颜色类，清除旧样式避免冲突
  change.classList.remove("green", "red");
  if(color === "green") {
    change.classList.add("green");
  } else if (color === "red") {
    change.classList.add("red");
  }
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>颜色切换Demo</title>
    <style>
      .green {
        background-color: green;
      }
      .red {
        background-color: red;
      }
      #change {
        border: 1px solid black;
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="change"></div>
    <button id="green-btn">Green</button>
    <button id="red-btn">Red</button>

    <script>
      const gbutton = document.getElementById("green-btn");
      const rbutton = document.getElementById("red-btn");
      const change = document.getElementById("change");
      let color = "";

      function changeGreen () {
        color = "green";
      }

      function changeRed () {
        color = "red";
      }

      gbutton.addEventListener("click", changeGreen)
      rbutton.addEventListener("click", changeRed)

      change.addEventListener("click", () => { 
        change.classList.remove("green", "red");
        if(color === "green") {
          change.classList.add("green");
        } else if (color === "red") {
          change.classList.add("red");
        }
      });
    </script>
  </body>
</html>

如果需要更好的交互体验，可以追加两个优化点：

• 给当前选中的颜色按钮加高亮样式，明确提示用户当前选中的颜色
• 初始默认选中一个颜色，避免空状态点击div无反馈

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