如何将按钮点击文本作为函数参数传递实现硬币翻转游戏选值获取

两处核心错误导致用户选择结果无法正常渲染：

• 两个按钮使用了重复的id="choice"，HTML规范要求id属性在页面内全局唯一，重复id会导致DOM元素解析、获取异常
• 按钮绑定的onclick="flip()"调用时没有传入任何参数，flip函数形参choice实际接收到的值为undefined，拼接提示文本时自然无法显示用户选择
• 原逻辑附带小问题：没有做猜测结果和硬币结果的匹配判断，无论对错都显示"Good Guess!"

1. 修改HTML按钮代码 #

首先删掉重复的id，给两个按钮设置独立id（后续如果要加样式、绑定其他事件不会冲突），然后在调用flip函数时传入对应参数。
传参可以选两种简单写法：

• 写法1（更稳定，不依赖按钮显示文本）：直接传固定字符串

<button onclick="flip('Heads')" id="headsBtn">Heads</button>
<button onclick="flip('Tails')" id="tailsBtn">Tails</button>

• 写法2（更简洁，自动取按钮文本）：通过this获取触发点击的按钮本身，取其文本内容传参

<button onclick="flip(this.innerText)" id="headsBtn">Heads</button>
<button onclick="flip(this.innerText)" id="tailsBtn">Tails</button>

2. （可选优化）补全flip函数的胜负判断逻辑 #

原逻辑没有判断猜测是否正确，可以补全匹配逻辑，让游戏功能完整，同时建议用textContent渲染纯文本，比innerHTML安全性更高：

function flip(choice) {
    // 生成0/1随机数，对应正反面
    const randomNum = Math.floor(Math.random() * 2);
    const coinSide = randomNum === 0 ? "Tails" : "Heads";

    // 渲染页面内容
    document.getElementById("guess").textContent = `You guessed ${choice}...`;
    document.getElementById("result").textContent = `The coin flips and comes up ${coinSide}!`;
    // 匹配结果给出对应提示
    document.getElementById("confirm").textContent = choice === coinSide ? "Good Guess!" : "Wrong guess, try again!";
}

index.html #

<!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>Coin Flip</title>
  </head>

  <body>
    <h1>Coin Flip</h1>
    <h3>Let's flip a coin! Choose heads or tails:</h3>

    <button onclick="flip('Heads')" id="headsBtn">Heads</button>
    <button onclick="flip('Tails')" id="tailsBtn">Tails</button>

    <h3 id="guess"></h3>
    <h3 id="result"></h3>
    <h3 id="confirm"></h3>
  </body>
  <script src="scripts.js"></script>
</html>

scripts.js #

function flip(choice) {
    const randomNum = Math.floor(Math.random() * 2);
    const coinSide = randomNum === 0 ? "Tails" : "Heads";

    document.getElementById("guess").textContent = `You guessed ${choice}...`;
    document.getElementById("result").textContent = `The coin flips and comes up ${coinSide}!`;
    document.getElementById("confirm").textContent = choice === coinSide ? "Good Guess!" : "Wrong guess, try again!";
}

修复后点击对应按钮，就能正常显示用户选择的Heads/Tails，同时会正确判断猜测结果。

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