HTML按钮调用JS函数generateKeyPair提示未定义 单独运行代码正常如何解决

Uncaught ReferenceError: generateKeyPair is not defined 报错的核心原因是你定义的generateKeyPair函数没有暴露在浏览器全局作用域下，HTML行内onclick事件仅支持调用挂载在window对象下的全局函数。
通常出现这个问题是因为你的函数被定义在闭包、DOM加载完成回调、模块化作用域中（比如使用webpack/Vite等打包工具、script标签加了type="module"属性），这类场景下的函数默认都是私有作用域，不会被全局访问到。

• 方案1：手动将函数挂载到全局对象，在函数定义末尾新增挂载逻辑即可：

function generateKeyPair() {
    var keyPair = web3.eth.accounts.create();
    document.getElementById('privateKey').innerHTML = keyPair.privateKey;
    document.getElementById('generatedAddress').innerHTML = keyPair.address;
}
// 新增以下代码将函数暴露到全局
window.generateKeyPair = generateKeyPair

• 方案2：弃用行内onclick写法，改用JS事件绑定实现调用，不需要污染全局作用域：
  首先修改按钮代码，删掉onclick属性：

<button id="send">Generate Random Key Pair</button>

然后在JS中添加事件绑定逻辑：

document.getElementById('send').addEventListener('click', generateKeyPair)

请确认web3相关依赖在函数执行前已经完成初始化加载，避免后续出现web3未定义的相关报错

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