掷骰子网页CSS失效问题：首次刷新正常，点击后样式不生效

首次刷新页面时一切正常，但点击一次"ROLL THE DICE"按钮后，CSS样式无法按要求正确应用。

项目背景与需求 #

团队做构建周项目时出现分歧，决定用掷骰子定方案负责人，需要开发一个三骰子应用：

• 三个DIV分别代表成员A、B、C，ID为member-1、member-2、member-3，显示1-6的随机数
• 点击ID为roll的"ROLL THE DICE"按钮，生成三个随机数
• 顶部ID为winner的DIV显示获胜者
• 样式规则：获胜骰子绿色，第二名黄色，最低分红色，平局时相同点数骰子蓝色

错误原因 #

原代码通过setAttribute("id", "color-id")修改元素ID来切换样式，这会覆盖元素原本的member-1/member-2/member-3 ID。第一次点击后，元素ID变成了green/red等，后续点击时document.getElementById("member-1")无法找到对应元素，导致样式和逻辑都失效。此外，ID在DOM中是唯一的，多个元素用同一个ID（比如多个blue）也不符合规范。

解决方案 #

改用CSS类来控制颜色样式，保留元素原有ID用于选择，通过添加/移除类来切换样式，每次掷骰子前先清除所有颜色类，再重新添加对应类。

修改后的代码 #

CSS（将颜色ID改为类）

/* 基础骰子样式 */
.member {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
}

#roll {
  margin-left: -35px;
  margin-top: 25px;
  text-align: center;
  border-radius: 5px;
  background-color: gray;
  border: none;
  color: white;
  font-size: 25px;
}

#roll:hover {
  background-color: rgb(53, 52, 52);
  color: black;
  cursor: pointer;
  border: 1px solid black;
}

#parent {
  margin-left: 45%;
}

#winner {
  margin-left: -95px;
}

/* 颜色类 */
.green {
  background-color: green;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

HTML（给骰子添加统一的member类）

<div id="parent">
  <div id="winner">
    <h1>The Winner is team:-<span id="winnerteam"></span></h1>
  </div>
  <div id="member-1" class="member">
    <h1 id="score1"></h1>
  </div>
  <div id="member-2" class="member">
    <h1 id="score2"></h1>
  </div>
  <div id="member-3" class="member">
    <h1 id="score3"></h1>
  </div>
  <button id="roll">ROLL THE DICE</button>
</div>

JavaScript（修改样式控制逻辑，用类代替ID）

document.getElementById("roll").addEventListener("click", rollTheDice);

function rollTheDice() {
  // 获取元素
  const member1 = document.getElementById("member-1");
  const member2 = document.getElementById("member-2");
  const member3 = document.getElementById("member-3");
  const winnerText = document.getElementById("winnerteam");

  // 生成随机数
  const score1 = Math.floor(Math.random() * 6) + 1;
  const score2 = Math.floor(Math.random() * 6) + 1;
  const score3 = Math.floor(Math.random() * 6) + 1;

  // 更新分数显示
  document.getElementById("score1").innerText = score1;
  document.getElementById("score2").innerText = score2;
  document.getElementById("score3").innerText = score3;

  // 清除所有颜色类
  [member1, member2, member3].forEach(el => {
    el.classList.remove("green", "red", "yellow", "blue");
  });

  // 判断结果并设置样式
  if (score1 === score2 && score2 === score3) {
    winnerText.innerText = "Draw";
    member1.classList.add("blue");
    member2.classList.add("blue");
    member3.classList.add("blue");
  } else if (score1 === score2 || score1 === score3 || score2 === score3) {
    winnerText.innerText = "Draw";
    if (score1 === score2) {
      member1.classList.add("blue");
      member2.classList.add("blue");
      score3 > score1 ? member3.classList.add("green") : member3.classList.add("yellow");
    } else if (score1 === score3) {
      member1.classList.add("blue");
      member3.classList.add("blue");
      score2 > score1 ? member2.classList.add("green") : member2.classList.add("yellow");
    } else if (score2 === score3) {
      member2.classList.add("blue");
      member3.classList.add("blue");
      score1 > score2 ? member1.classList.add("green") : member1.classList.add("yellow");
    }
  } else {
    if (score1 > score2 && score1 > score3) {
      winnerText.innerText = 1;
      member1.classList.add("green");
      score2 > score3 ? (member2.classList.add("yellow"), member3.classList.add("red")) : (member2.classList.add("red"), member3.classList.add("yellow"));
    } else if (score2 > score1 && score2 > score3) {
      winnerText.innerText = 2;
      member2.classList.add("green");
      score1 > score3 ? (member1.classList.add("yellow"), member3.classList.add("red")) : (member1.classList.add("red"), member3.classList.add("yellow"));
    } else {
      winnerText.innerText = 3;
      member3.classList.add("green");
      score1 > score2 ? (member1.classList.add("yellow"), member2.classList.add("red")) : (member1.classList.add("red"), member2.classList.add("yellow"));
    }
  }
}

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