点击按钮无响应：Uncaught ReferenceError: toggleText未定义问题求助

核心问题原因 #

• 你的script标签添加了type="module"，ES模块拥有独立作用域，模块内定义的toggleText、demo函数默认不会暴露到全局作用域中。但按钮的onclick属性代码是在全局作用域执行的，因此浏览器找不到这些函数，触发"未定义"报错。
• 另外Game.js里存在bug：setX方法直接使用field[fieldIndex]，未通过this访问实例的field数组，导致无法正确修改游戏字段。

方案1：用事件监听替代onclick属性（推荐） #

移除HTML字符串中的onclick属性，在DOM元素生成后通过选择器绑定事件，这种写法更符合模块化开发规范，不依赖全局作用域。

修正后的script.js代码：

import Game from "./Game.js";

const game = new Game(
  "play",
  [" "," "," "," "," "," "," "," "," "]
);

const toggleText = function (button, fieldIndex) {
  button.textContent = "X";
  game.setX(fieldIndex);
};

const demo = function() {
  document.getElementById("btn").textContent = "New text";
};

// 插入页面内容
const content = `
  <main>
    <button id="btn">Old Text</button>
    <button id="myButton">Lock</button>
    <table>
      <tr>
        <td><button class="button" id="b0" type="button">${game.field[0]}</button></td>
        <td><button class="button b1" type="button">${game.field[1]}</button></td>
        <td><button class="button b2" type="button">${game.field[2]}</button></td>
      </tr>
      <tr>
        <td><button class="button" type="button">${game.field[3]}</button></td>
        <td><button class="button" type="button">${game.field[4]}</button></td>
        <td><button class="button" type="button">${game.field[5]}</button></td>
      </tr>
      <tr>
        <td><button class="button" type="button">${game.field[6]}</button></td>
        <td><button class="button" type="button">${game.field[7]}</button></td>
        <td><button class="button" type="button">${game.field[8]}</button></td>
      </tr>
    </table>  
  </main>
`;

document.body.innerHTML = content;

// 绑定按钮事件
document.getElementById("btn").addEventListener("click", demo);
document.getElementById("myButton").addEventListener("click", function() {
  toggleText(this);
});

// 给所有格子按钮绑定事件
document.querySelectorAll(".button").forEach((btn, index) => {
  btn.addEventListener("click", function() {
    toggleText(this, index);
  });
});

方案2：将函数挂载到window对象（不推荐） #

如果坚持使用onclick属性，可以把模块内的函数挂载到window对象，使其进入全局作用域：

修改script.js中的函数定义：

window.toggleText = function (button_id,fieldIndex) {
  document.getElementById(button_id).innerHTML = "X";
  game.setX(fieldIndex);
};

window.demo = function(){
  document.getElementById("btn").innerText = "New text";
};

这种写法会污染全局作用域，不符合模块化开发理念，仅作应急方案。

修正Game.js的bug #

修改setX方法，通过this访问实例的field数组：

class Game {
  constructor(
    status,
    field = []
  ){
    this.status = status;
    this.field = field;
  }
  setX(fieldIndex){
    this.field[fieldIndex] = "X"; // 新增this，访问实例属性
    console.log(this.field);
  }
  reset(){

  }
}

export default Game;

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