分支场景项目添加骰子功能失败：JS代码崩溃求助

我完成了一个学校的分支场景项目（基于HTML/CSS/JavaScript），想在id为19、23、29、34的节点加入骰子功能提升交互性，但添加后整个程序直接停止运行。我试过编写rollDice函数嵌入对应节点，也尝试过跳转到包含JavaScript的次级HTML页面，都没能解决问题。

我尝试的骰子函数 #

// 掷骰子函数
function rollDice() {
    // 生成1-6的随机数
    let diceRoll = Math.floor(Math.random() * 6) + 1;
    
    // 显示结果
    document.getElementById('diceResult').innerHTML = `你掷出了：${diceRoll}`;
    
    // 更新骰子图片（可选，假设存在dice1.png到dice6.png的图片）
    let diceImage = document.getElementById('diceImage');
    diceImage.src = `dice${diceRoll}.png`;
}

项目核心代码 #

JavaScript核心逻辑 #

"use strict";
const heading_element = document.getElementById('heading'); // 用于更新场景标题
const txt_element = document.getElementById('txt'); // 用于更新场景文本
const buttonsContainer = document.getElementById('buttons-container'); // 用于动态生成选项按钮

// 场景节点数组
const steps = [
  {
    id: 0,
    heading: "Pros. VS Cons",
    txt: "一场决策之旅",
    options: [
      { target: 1, txt: "规则" },
      { target: 2, txt: "开始" }
    ]
  },
  // 其余节点内容省略，完整代码包含id为19、23、29、34的机会节点
];

function scenarieStart(stepIndex) {
  const currentStep = steps[stepIndex];
  heading_element.textContent = currentStep.heading;
  txt_element.textContent = currentStep.txt;
  buttonsContainer.innerHTML = "";
  currentStep.options.forEach((option, index) => {
    const button = document.createElement("button");
    button.textContent = option.txt;
    button.classList.add("btn");
    button.addEventListener("click", () => {
      scenarieStart(option.target);
    });
    buttonsContainer.appendChild(button);
  });
}
scenarieStart(0);

HTML结构 #

<title>Pros._VS_Cons!</title>
<link rel="stylesheet" href="css/style.css">
<script src="script.js" defer></script>

<img src="img/bg_1-100.jpg" alt="Windows 95复古背景" aria-hidden="true" class="bg">
<header id="header"></header>
<main class="window">
  <div class="branch">
    <div id="heading">标题</div>
    <div id="txt">文本</div>
    <div id="buttons-container">
      <button class="btn">选项1</button>
      <button class="btn">选项2</button>
      <button class="btn">选项3</button>
    </div>
  </div>
</main>

问题原因及解决办法 #

1. 缺失DOM元素导致报错 #

你的rollDice函数直接调用了diceResult和diceImage元素，但当前HTML中完全没有这两个节点，执行时会抛出Cannot set property 'innerHTML' of null类错误，直接阻断程序运行。

解决：
在HTML的.branch容器内添加骰子相关元素：

<div class="branch">
  <div id="heading">标题</div>
  <div id="txt">文本</div>
  <!-- 新增骰子功能所需元素 -->
  <div id="diceResult"></div>
  <img id="diceImage" src="dice1.png" alt="骰子" style="display:none;">
  <div id="buttons-container">
    <button class="btn">选项1</button>
    <button class="btn">选项2</button>
    <button class="btn">选项3</button>
  </div>
</div>

2. 骰子功能未正确嵌入目标节点 #

需要在场景切换函数中判断当前节点是否为需要骰子功能的id，动态添加骰子按钮，而非硬编码函数。

修改scenarieStart函数：

function scenarieStart(stepIndex) {
  const currentStep = steps[stepIndex];
  heading_element.textContent = currentStep.heading;
  txt_element.textContent = currentStep.txt;
  buttonsContainer.innerHTML = "";

  // 标记需要骰子功能的节点id
  const diceStepIds = [19,23,29,34];
  if(diceStepIds.includes(currentStep.id)){
    // 创建掷骰子按钮
    const diceBtn = document.createElement("button");
    diceBtn.textContent = "掷骰子";
    diceBtn.classList.add("btn");
    diceBtn.addEventListener("click", rollDice);
    buttonsContainer.appendChild(diceBtn);
    // 显示骰子图片
    document.getElementById('diceImage').style.display = "block";
  }

  // 生成常规选项按钮
  currentStep.options.forEach((option, index) => {
    const button = document.createElement("button");
    button.textContent = option.txt;
    button.classList.add("btn");
    button.addEventListener("click", () => {
      scenarieStart(option.target);
      // 切换场景后隐藏骰子元素
      document.getElementById('diceResult').innerHTML = "";
      document.getElementById('diceImage').style.display = "none";
    });
    buttonsContainer.appendChild(button);
  });
}

3. 放弃次级页面跳转逻辑 #

跳转页面会重置当前游戏状态，完全没必要。直接在当前页面动态控制骰子元素的显示/隐藏，就能保持游戏流程的连贯性。

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