为何提示函数已定义但未被读取？Firebase认证中onclick无法调用login函数

问题原因 #

你引入JS文件时设置了type="module"，模块内部声明的所有函数、变量默认都是私有作用域，不会挂载到全局window对象上。而HTML内联写的onclick事件只会从全局作用域查找对应的函数，自然找不到你定义的login。编辑器提示「函数已定义但从未被读取」，也是因为你只在模块内部定义了login，既没有在模块内部调用，也没有对外暴露，编辑器认为该函数没有被使用。

解决方法 #

方法1：把login函数挂载到全局（最简单，适合当前测试场景） #

在你现有JS文件的login函数定义完成后，新增一行代码把函数挂载到window上即可：

function login(){
    window.alert('Hey!');
}
// 新增下面这行代码
window.login = login;

方法2：在JS内部绑定点击事件（更规范，推荐长期使用） #

不用内联写onclick，直接在JS里给按钮绑定点击事件，是目前前端开发的通用规范：

1. 先给HTML里的登录按钮加一个id属性，删除原来的onclick：

<button id="loginBtn">Login to Account</button>

2. 在JS文件末尾新增代码绑定事件：

document.getElementById('loginBtn').addEventListener('click', login)

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