页面创建按钮并绑定startPage函数失效，请求技术协助

嘿，我一眼就看到你代码里的几个小问题，这就是按钮点击没反应的根源：

• 事件绑定方式错误：你写的button.addEventListener ("click", this.startPage())是直接执行了startPage函数，而不是把它作为点击事件的回调。括号会让函数立即执行（页面加载时就跑了一遍），而不是等点击时才触发。另外这里还存在this指向问题——按钮点击时，回调里的this会指向按钮本身，而不是你的TYPER实例，这样this.loadWords()也会报错。
• 变量作用域问题：init里创建的button是局部变量，到startPage函数里根本访问不到，所以button.style.display = "block"这行代码会直接抛出“变量未定义”的错误（你可以打开浏览器控制台看看，肯定能看到这个报错）。

修正后的代码 #

TYPER.prototype = {
  init: function () {
    this.canvas = document.getElementsByTagName('canvas')[0]
    this.ctx = this.canvas.getContext('2d')
    this.canvas.style.width = this.WIDTH + 'px'
    this.canvas.style.height = this.HEIGHT + 'px'
    this.canvas.width = this.WIDTH * 2
    this.canvas.height = this.HEIGHT * 2
    // 将button存为实例属性，让其他方法能访问到
    this.button = document.createElement("button")
    this.button.innerHTML = "Start!!!"
    let body = document.getElementsByTagName("body")[0]
    body.appendChild(this.button);
    // 绑定this指向，传递函数引用而非直接执行
    this.button.addEventListener("click", this.startPage.bind(this))
  },
  startPage: function () {
    // 通过this访问实例上的button元素
    this.button.style.display = "none" // 这里推测你是想隐藏按钮，原代码写block逻辑有点奇怪，可按需调整
    this.loadWords()
  },
  // 示例loadWords方法，用于测试
  loadWords: function() {
    alert('点击生效啦！开始加载单词~')
  }
}

关键修改说明 #

1. 将button转为实例属性：用this.button替代局部变量，确保startPage方法能正确访问到按钮元素。
2. 修正事件绑定逻辑：去掉this.startPage()的括号（传递函数引用），同时用bind(this)强制回调里的this指向TYPER实例，保证this.loadWords()能正常调用。
3. 逻辑优化：把button.style.display = "block"改成了none，毕竟点击开始按钮后通常是隐藏它，如果你确实需要显示可以改回去。

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