如何在按钮onclick中调用Firebase的newuser()函数？解决未定义报错

当使用type="module"引入JavaScript文件时，脚本会运行在独立的模块作用域中，而非全局作用域。这意味着你在模块内定义的newuser()函数默认不会暴露到全局的window对象上，所以HTML里的内联onclick="newuser()"无法找到这个函数，就会抛出newuser is not defined的错误。

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

如果你想继续使用内联onclick，可以在模块脚本里把newuser函数显式挂载到window上，让全局作用域能访问到它：

模块化JS代码 #

// 导入Firebase相关模块
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase-config.js";

// 定义新用户创建函数
async function newuser() {
  const email = document.getElementById('user-email').value;
  const password = document.getElementById('user-password').value;
  
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log('新用户创建成功:', userCredential.user);
    // 这里可以添加成功后的逻辑，比如跳转页面或提示用户
  } catch (error) {
    console.error('创建失败:', error.message);
    // 处理错误，比如显示错误提示
  }
}

// 将函数暴露到全局window对象
window.newuser = newuser;

HTML代码 #

<input type="email" id="user-email" placeholder="邮箱">
<input type="password" id="user-password" placeholder="密码">
<button onclick="newuser()">创建新用户</button>

<!-- 注意模块脚本的引入方式 -->
<script type="module" src="./auth-script.js"></script>

方案2：使用事件监听器绑定点击事件（推荐） #

这种方式不需要暴露全局函数，符合现代前端的关注点分离原则，避免全局作用域污染，也更易维护：

HTML代码 #

<input type="email" id="user-email" placeholder="邮箱">
<input type="password" id="user-password" placeholder="密码">
<button id="signup-button">创建新用户</button>

<script type="module" src="./auth-script.js"></script>

模块化JS代码 #

import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase-config.js";

async function newuser() {
  const email = document.getElementById('user-email').value;
  const password = document.getElementById('user-password').value;
  
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log('新用户创建成功:', userCredential.user);
  } catch (error) {
    console.error('创建失败:', error.message);
  }
}

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const signupBtn = document.getElementById('signup-button');
  signupBtn.addEventListener('click', newuser);
});

• 确保Firebase的配置文件（比如firebase-config.js）正确导入，且auth实例已正确初始化。
• 使用async/await时，要确保函数被标记为async，否则会报错。
• 方案2中，一定要等待DOMContentLoaded再绑定事件，避免DOM元素还未加载完成就获取不到的问题。

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