点击按钮时文本始终显示"You rolled a 1"的原因分析

核心错误1：赋值运算符替代比较运算符 #

你所有if/else if条件里用的是赋值运算符=，而非用于判断的严格比较运算符===。

比如if (randomNumber = 0)的实际作用是把0赋值给randomNumber，这个表达式的结果为0（被视为布尔值false），因此会跳过该分支；到else if (randomNumber = 1)时，代码会把1赋值给randomNumber，表达式结果为1（布尔值true），所以必然执行这个分支的代码，导致按钮文本永远显示"You Rolled a 1"。

核心错误2：随机数仅初始化一次，点击不更新 #

var randomNumber = randomRange()仅在页面加载时执行一次，生成固定随机数。点击按钮的test函数里没有重新调用randomRange()生成新值，就算修复了比较问题，每次点击也只会用同一个初始随机数。

额外问题：随机数范围不符预期 #

Math.floor(Math.random() * 10)生成的是0-9的整数，但你代码里保留了判断randomNumber = 10的分支，这个分支永远不会触发。如果需要生成1-10的随机数，要修改randomRange函数。

修复后的完整代码 #

// 生成1-10的随机数
function randomRange() {
  return Math.floor(Math.random() * 10) + 1;
}

const button = document.querySelector("#button");

function test() {
  button.style.color = "red";
  button.style.background = "black";
  // 每次点击重新生成随机数
  const randomNumber = randomRange();
  console.log(randomNumber);
  
  // 用严格比较运算符判断
  if (randomNumber === 1) {
    button.textContent = "You Rolled a 1";
  } else if (randomNumber === 2) {
    button.textContent = "You Rolled a 2";
  } else if (randomNumber === 3) {
    button.textContent = "You Rolled a 3";
  } else if (randomNumber === 4) {
    button.textContent = "You Rolled a 4";
  } else if (randomNumber === 5) {
    button.textContent = "You Rolled a 5";
  } else if (randomNumber === 6) {
    button.textContent = "You Rolled a 6";
  } else if (randomNumber === 7) {
    button.textContent = "You Rolled a 7";
  } else if (randomNumber === 8) {
    button.textContent = "You Rolled a 8";
  } else if (randomNumber === 9) {
    button.textContent = "You Rolled a 9";
  } else if (randomNumber === 10) {
    button.textContent = "You Rolled a 10";
  }
}

// 绑定按钮点击事件（若HTML未直接绑定）
button.addEventListener('click', test);

可选优化：简化条件判断 #

可以用字符串拼接替代大量if/else分支，代码更简洁：

function test() {
  button.style.color = "red";
  button.style.background = "black";
  const randomNumber = randomRange();
  console.log(randomNumber);
  button.textContent = `You Rolled a ${randomNumber}`;
}

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