如何修复JavaScript实现抛硬币游戏图片切换失效问题？

我来帮你梳理下原代码里的问题，一步步把它修好：

先看修复后的完整代码 #

HTML部分 #

<h1>Make your decision!</h1>
<!-- 先设置默认图片，添加按钮触发翻转操作 -->
<img id="flip" src="default.jpg" alt="Coin">
<button onclick="flipCoin()">Flip the Coin</button>
<!-- 用来显示翻转结果的元素 -->
<p id="result"></p>

JavaScript部分 #

function flipCoin() {
  // 1. 获取图片元素，注意id必须用引号包裹
  const coinImage = document.getElementById("flip");
  // 2. 生成0/1的随机数，换变量名避免覆盖DOM元素引用
  const randomFlip = Math.round(Math.random());
  let resultText;

  if (randomFlip === 1) {
    coinImage.src = "heads.jpg";
    resultText = "Heads!";
  } else {
    // 3. 这里的元素id要和HTML里的一致，是"flip"不是"coin"
    coinImage.src = "tails.jpg";
    resultText = "Tails!";
  }

  // 4. 给result赋值后再显示，避免用document.write（会覆盖整个页面）
  document.getElementById("result").textContent = resultText;
  console.log(resultText); // 方便调试查看结果
}

原代码里的关键错误点 #

• getElementById的参数未加引号：原代码document.getElementById(coin)中，coin是元素的id字符串，必须用双引号/单引号包裹成"flip"（因为你HTML里的img id是flip），否则JS会把coin当成未定义的变量，直接抛出错误。
• 重复声明变量覆盖DOM引用：你连续两次用var coin声明变量，第一次获取图片元素，第二次把随机数赋值给它，导致之前的元素引用被覆盖，根本没法操作图片。所以要给随机数换个变量名，比如randomFlip。
• else分支的元素id写错：原else里用了document.getElementById("coin")，但你的HTML里img的id是flip，这会找不到目标元素，图片自然不会切换。
• result变量未赋值：你只声明了var result但没给它设置具体值，所以document.write(result)会输出undefined，需要在if/else分支里给它赋值对应的结果文本。
• 缺少交互触发时机：原代码页面一加载就执行一次，加个按钮绑定点击事件，用户主动点击才翻转，更符合实际使用场景。
• document.write的不合理使用：document.write会覆盖整个页面内容，建议用页面元素来显示结果，或者用console.log调试。

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