Uncaught ReferenceError报错：函数已定义却提示未定义

你遇到的Uncaught ReferenceError: generateProcessLogQuery is not defined错误，核心原因是内联事件处理函数的作用域限制，加上代码写法还存在几个小问题，我来一步步拆解：

为什么会报错？ #

当你用innerHTML拼接onclick=generateProcessLogQuery(this.value)的时候，这个内联的点击事件代码是运行在全局作用域下的。如果你的generateProcessLogQuery函数是定义在局部作用域（比如某个函数内部、ES模块的作用域里），全局作用域根本找不到这个函数，自然会抛出未定义的错误。

另外，你的按钮还没设置value属性，就算函数能正常调用，this.value也会是undefined，这也是一个需要修正的点。

推荐解决方案：用事件监听替代内联onclick #

最好的做法是避免用innerHTML拼接事件代码，而是通过createElement创建按钮元素，再用addEventListener绑定点击事件。这样不仅能解决作用域问题，还能避免XSS风险，代码也更易维护。

修改后的代码如下：

for(let i = 0; i < row.length; i++){ 
  const thElement = row[i].getElementsByTagName('th')[0];
  const ref_num = thElement.innerText;
  
  // 创建按钮元素
  const button = document.createElement('button');
  button.textContent = ref_num;
  // 可选：如果需要用value传递值，可以设置这个属性
  button.value = ref_num;
  
  // 绑定点击事件，这里的回调能直接访问当前作用域的generateProcessLogQuery
  button.addEventListener('click', function() {
    generateProcessLogQuery(this.value);
    // 或者直接用ref_num，不用依赖value：
    // generateProcessLogQuery(ref_num);
  });
  
  // 替换<th>的内容为按钮
  thElement.innerHTML = '';
  thElement.appendChild(button);
  
  console.log("Ref Number : ", ref_num); 
} 

function generateProcessLogQuery(refresh){ 
  console.log("Here : ", refresh);
}

其他可选方案（不推荐） #

如果一定要用内联onclick，你需要确保generateProcessLogQuery是全局作用域的函数。比如把函数挂在window对象上：

window.generateProcessLogQuery = function(refresh){ 
  console.log("Here : ", refresh);
}

但这种做法会污染全局作用域，容易引发命名冲突，所以不建议使用。

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