修复connectMetamask未定义错误：Metamask网页钱包连接问题

问题原因 #

你的代码中，connectMetamask 函数未被暴露到全局作用域，导致按钮的 onclick 属性无法找到它。另外，原代码中判断 window.ethereum 的逻辑有误（错误地与字符串 "undefined" 比较，而非实际的 undefined 值）。

解决方案1：将函数挂载到全局 window 对象 #

修改脚本，确保函数在全局作用域可访问，同时修正 ethereum 的判断逻辑：

<li class="nav-item">
  <script>
    let account;
    // 将函数挂载到window，确保全局可访问
    window.connectMetamask = async () => {
      // 正确判断Metamask是否存在
      if (typeof window.ethereum !== "undefined") {
        try {
          const accounts = await window.ethereum.request({
            method: "eth_requestAccounts"
          });
          account = accounts[0];
          document.getElementById("connect-button").innerHTML = `Account is: ${account}`;
        } catch (err) {
          console.error("连接被用户拒绝或出错：", err);
        }
      } else {
        alert("请先安装Metamask钱包！");
      }
    }
  </script>
  <button id="connect-button" onclick="connectMetamask()">Connect Metamask</button>
</li>

解决方案2：使用事件监听器（推荐） #

这种方式分离HTML与JS逻辑，避免全局作用域问题，同时更符合现代前端开发规范：

<li class="nav-item">
  <button id="connect-button">Connect Metamask</button>
  <script>
    let account;
    const connectMetamask = async () => {
      if (typeof window.ethereum !== "undefined") {
        try {
          const accounts = await window.ethereum.request({
            method: "eth_requestAccounts"
          });
          account = accounts[0];
          document.getElementById("connect-button").textContent = `Account is: ${account}`;
        } catch (err) {
          console.error("连接失败：", err);
        }
      } else {
        alert("请安装Metamask钱包后重试！");
      }
    };

    // 为按钮添加点击事件监听器
    document.getElementById("connect-button").addEventListener("click", connectMetamask);
  </script>
</li>

关键修正点 #

• 替换 window.ethereum !== "undefined" 为 typeof window.ethereum !== "undefined"，正确判断Metamask是否安装。
• 添加错误捕获逻辑，处理用户拒绝连接或其他异常情况。
• 推荐使用事件监听器替代 onclick 属性，避免全局作用域依赖。

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