随机数匹配按钮index时页面提示文本显示异常问题求助

• 生成介于0和1之间的随机数
• 若随机数与两个btn中某一个的index匹配，该按钮判定为幸运按钮，背景色改为green，否则改为red
• 页面文本同步展示对应提示

除提示文本外其余逻辑均正常，但文本仅对1个btn展示正确：仅有一个按钮触发时会正确提示用户中奖，另一个按钮触发时提示文本不符合预期。

可通过点击第一个btn复现问题：当匹配成功即按钮变为绿色时，预期文本应显示「You are lucky」，但实际展示为「Other btn is lucky」。

提示文本的赋值逻辑被放在了遍历按钮的循环体内，每次循环都会覆盖#demo元素的内容。以随机数为0的场景为例：

• 第一次循环i=0，匹配成功，文本被赋值为「You are lucky (0)」
• 第二次循环i=1，匹配失败，文本直接被覆盖为「Other btn is lucky (0)」
  最终展示的永远是最后一个按钮的判断结果，因此会出现匹配成功但提示文本错误的问题。

把提示文本的赋值逻辑从循环中移出，循环仅用来修改两个按钮的背景色，遍历完成后统一设置提示文本即可。

JS代码 #

var btnLuck = document.getElementsByTagName("BUTTON");

function randomNumber() {
  var randNum = Math.floor(Math.random() * 2);
  // 循环仅处理按钮背景色
  for (let i = 0; i < btnLuck.length; i++) {
    btnLuck[i].style.backgroundColor = i === randNum ? "green" : "red";
  }
  // 统一设置提示文本
  document.getElementById("demo").innerHTML = "You are lucky (" + randNum + ")";
}

HTML代码 #

<button onclick="randomNumber()">Lucky number 0</button>
<button onclick="randomNumber()">Lucky number 1</button>
<div id="demo"></div>

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