Google Apps Script按钮OnClick调用类方法报错：TypeError排查

问题原因 #

通过字符串形式设置onclick="this.addRowInputTable()"时，这里的this指向的是按钮DOM元素本身，并非你定义addRowInputTable方法的作用域（比如类实例或全局上下文），所以浏览器找不到该函数。即使提前用self=this保存上下文，字符串形式的onclick也无法复用这个变量。

解决办法 #

放弃通过设置onclick属性绑定事件，改用addEventListener绑定，并通过bind固定函数的上下文：

1. 直接给按钮绑定事件监听
   在你的button_EnableDisable函数里，启用按钮时执行以下操作：

   function button_EnableDisable(isEnabled) {
     const addBtn = document.getElementById('Button_PTO_AddInputRow');
     if (isEnabled) {
       addBtn.disabled = false;
       // 先移除旧监听避免重复绑定
       addBtn.removeEventListener('click', this.addRowInputTable);
       // 绑定正确的上下文
       addBtn.addEventListener('click', this.addRowInputTable.bind(this));
     } else {
       addBtn.disabled = true;
       addBtn.removeEventListener('click', this.addRowInputTable);
     }
   }
   

2. 如果用类写法保存上下文
   如果你是用类组织代码，提前在构造函数里绑定函数的上下文，后续直接绑定即可：

   class PTOManager {
     constructor() {
       // 提前绑定上下文
       this.addRowInputTable = this.addRowInputTable.bind(this);
     }
   
     button_EnableDisable(isEnabled) {
       const addBtn = document.getElementById('Button_PTO_AddInputRow');
       if (isEnabled) {
         addBtn.disabled = false;
         addBtn.addEventListener('click', this.addRowInputTable);
       } else {
         addBtn.disabled = true;
         addBtn.removeEventListener('click', this.addRowInputTable);
       }
     }
   
     addRowInputTable() {
       // 你的添加行逻辑
     }
   }
   

3. 避免操作子span元素绑定事件
   直接操作Button_PTO_AddInputRow按钮元素即可，无需通过子span设置onclick，减少不必要的DOM层级操作。

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