JS游戏开发问题：点击Begin按钮后流程停滞，内部函数绑定异常

核心问题分析 #

你的代码里有几个关键错误导致了当前的问题：

1. update函数逻辑错误 #

• 连续两次给button.innerText赋值，第二次会直接覆盖第一次；且第二个键名写错（应为"button function"而非"button functions"）
• 把字符串类型的函数名赋值给button.innerText完全错误，且没有正确设置按钮的点击事件

2. 按钮点击事件错误赋值 #

• 用字符串（比如"outerFunction.innerFunction1"）存储函数标识，但直接把字符串赋值给button.onclick无效，onclick需要接收函数引用而非字符串
• useRandomIndex函数一开始就设置了button.onclick = innerFunction1，但后续welcome()调用update会覆盖这个设置，而update里没有正确绑定点击事件

3. 不必要的数组索引访问 #

你的button text是普通字符串，不是数组，加[0]会导致读取到undefined（比如currentObject["first question"]["button text"][0]）

4. functions对象错误使用 #

浏览器环境中没有全局的functions标准对象，你试图用它映射函数名到函数的方式不成立，且没有正确从字符串解析到对应的函数

分步修复方案 #

第一步：修正update函数 #

让update正确设置按钮文本和点击事件，直接传递函数引用而非字符串：

function update(action, onClickHandler) {
  button.innerText = action["button text"];
  button.onclick = onClickHandler; // 直接绑定函数引用
}

第二步：调整useRandomIndex函数 #

移除函数内直接设置button.onclick的代码，让外部逻辑控制按钮事件，同时保留随机选中的对象供后续复用：

function useRandomIndex() {
  const randomIndex = Math.floor(Math.random() * objects.length);
  const currentObject = objects[randomIndex];

  // 第一个问题的处理函数
  function innerFunction1() {
    button.innerText = currentObject["first question"]["button text"];
    // 直接绑定innerFunction2作为下一次点击的处理函数
    button.onclick = innerFunction2;
  }

  // 第二个问题的处理函数
  function innerFunction2() {
    button.innerText = currentObject["second question"]["button text"];
    // 绑定后续函数，比如otherFunction
    button.onclick = otherFunction;
  }

  // 返回随机对象和处理函数，方便外部复用
  return { currentObject, innerFunction1, innerFunction2 };
};

第三步：修正welcome函数和初始化逻辑 #

让welcome正确调用update绑定Begin按钮的点击事件，指向outerFunction.innerFunction1：

const outerFunction = useRandomIndex();

function welcome() {
  // 传递欢迎动作和对应的点击处理函数
  update(actions[0], outerFunction.innerFunction1);
}

// 示例后续函数，可根据需求自定义
function otherFunction() {
  button.innerText = "后续逻辑触发！";
  // 这里可以添加更多游戏步骤
}

// 初始化欢迎页
welcome();

第四步：修正objects和actions结构 #

去掉不需要的数组索引，因为你的button text是单个字符串：

const objects = [
  {
    id: 0,
    name: "Object",
    "first question": {
       "button text": "第一个问题的按钮文本",
     },
    "second question": {
       "button text": "第二个问题的按钮文本",
     }
   }
]

const actions = [
  {
    name: "welcome",
    "button text": "Begin!"
  }
]

完整修正后的代码 #

const button = document.querySelector('#button')

const objects = [
  {
    id: 0,
    name: "植物标本",
    "first question": {
       "button text": "它的叶片是什么形状？",
     },
    "second question": {
       "button text": "它适合生长在什么环境？",
     }
   }
]

const actions = [
  {
    name: "welcome",
    "button text": "Begin!"
  }
]

function useRandomIndex() {
  const randomIndex = Math.floor(Math.random() * objects.length);
  const currentObject = objects[randomIndex];

  function innerFunction1() {
    button.innerText = currentObject["first question"]["button text"];
    button.onclick = innerFunction2;
  }

  function innerFunction2() {
    button.innerText = currentObject["second question"]["button text"];
    button.onclick = otherFunction;
  }

  return { currentObject, innerFunction1, innerFunction2 };
};

const outerFunction = useRandomIndex();

function update(action, onClickHandler) {
  button.innerText = action["button text"];
  button.onclick = onClickHandler;
}

function welcome() {
  update(actions[0], outerFunction.innerFunction1);
}

function otherFunction() {
  button.innerText = `你选中的对象是：${outerFunction.currentObject.name}`;
  // 这里可以添加游戏结束或更多后续逻辑
}

welcome();

关键说明 #

1. 随机对象复用：通过useRandomIndex返回的currentObject，你可以在任何后续函数里访问这个随机选中的对象（比如示例里的otherFunction）
2. 按钮事件绑定：始终直接给button.onclick赋值函数引用，不要用字符串
3. 初始化逻辑：welcome()会在页面加载时设置欢迎页按钮，点击Begin后触发innerFunction1进入第一个问题，以此类推

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