HTML 中通过 onclick 等内联事件属性调用 ES 模块函数时，必须使用带引号的字符串语法（如 onclick="comp()"），且函数需全局可访问或显式绑定；直接写 onclick=comp() 会导致引用错误，因模块作用域默认隔离。
html 中通过 `onclick` 等内联事件属性调用 es 模块导出的 javascript 函数时，必须使用带引号的字符串语法（如 `onclick="comp()"`），且函数需全局可访问或显式绑定；直接写 `onclick=comp()` 会导致引用错误，因模块作用域默认隔离。
你在 login.html 中使用了 ，看似简洁，实则存在两个关键问题：
- 语法错误：onclick=comp() 缺少引号，浏览器会将其解析为 onclick=comp()（无引号），等价于 onclick=undefined —— 因为 comp 并未在全局作用域声明；
- 模块作用域隔离：你用 <script type="module"> 加载 login.js，其内部 export default function comp() 属于模块私有作用域，<strong>不会自动挂载到 window 对象上，因此 HTML 内联事件无法直接访问。</script>
✅ 正确做法是：
- 将 onclick 属性值用双引号（或单引号）包裹，写成字符串形式；
- 同时确保目标函数在全局作用域中可用（即显式挂载到 window）。
✅ 修改方案（推荐）
步骤 1：修正 HTML 中的事件绑定
<!-- ❌ 错误写法（无引号 + 无全局访问） --> <button onclick=comp() id="but">Login</button> <!-- ✅ 正确写法（带引号 + 显式调用） --> <button onclick="comp()" id="but">Login</button>
步骤 2：在 login.js 中将函数暴露至全局（兼容内联调用）
由于 ES 模块默认不污染全局，需手动挂载：
import { rows } from "./connect.js";
console.log("Loaded rows:", rows);
let nm = 0;
let pwd = 0;
// ✅ 导出并同时挂载到 window，供 HTML 内联事件调用
export function incre() {
nm = 0;
pwd = 0;
for (let i = 0; i < rows.length; i++) {
if (rows[i].uname === document.getElementById("username").value) nm++;
if (rows[i].pwd === document.getElementById("pwd").value) pwd++;
}
}
export function comp() {
document.getElementById("but").style.marginLeft = "23px";
document.getElementById("pwd").style.marginLeft = "32px";
if (nm === 0) {
document.getElementById("usernameerr").innerText = "Invalid Username";
document.getElementById("but").style.marginTop = "20px";
}
if (pwd === 0) {
document.getElementById("passworderr").innerText = "Invalid Password";
document.getElementById("but").style.marginTop = "20px";
}
if (nm > 0 && pwd > 0) {
window.location.replace("main.html");
}
// 重置状态（注意：此处原代码写的是 num=0，应为 nm=0）
nm = 0;
pwd = 0;
}
// ? 关键：挂载到全局，使 onclick="comp()" 可识别
window.incre = incre;
window.comp = comp;? 提示：export default 在模块中只能有一个，且不能与命名导出混用（除非你明确需要默认导出）。此处改用 export function 更清晰、更易维护。
立即学习“Java免费学习笔记（深入）”；
步骤 3（可选但强烈推荐）：彻底告别内联 JS，改用现代事件监听
避免 onclick 等内联属性，提升可维护性与安全性：
// 在 login.js 底部添加（确保 DOM 加载完成）
document.addEventListener("DOMContentLoaded", () => {
const button = document.getElementById("but");
const usernameInput = document.getElementById("username");
const pwdInput = document.getElementById("pwd");
// 使用事件委托或直接绑定
button.addEventListener("click", comp);
usernameInput.addEventListener("input", incre); // 推荐用 input 而非 onchange（实时响应）
pwdInput.addEventListener("input", incre);
});对应 HTML 简化为：
<button id="but">Login</button> <input type="text" id="username" placeholder="User-Name"> <input type="password" id="pwd" placeholder="Password">
⚠️ 注意事项
- connect.js 中使用了 await（顶层 await），需确保浏览器支持（Chrome 89+、Firefox 89+、Safari 15.4+），否则需包装为异步 IIFE；
- mysql2 是 Node.js 模块，无法在浏览器中直接运行——你当前的 connect.js 会在前端报错（ReferenceError: mysql is not defined）。真实项目中，数据库查询必须通过后端 API 完成，前端只负责发送请求（如 fetch('/api/login')）；
- onchange 触发时机较晚（失焦才触发），建议改用 input 事件实现即时校验；
- 全局挂载（window.comp = ...）仅作为过渡方案；长期应采用模块化 + 事件监听器方式，符合现代前端工程实践。
✅ 总结
| 问题 | 原因 | 解决方案 |
|---|---|---|
| onclick=comp() 不生效 | 无引号导致语法错误 + 模块函数未暴露至全局 | 改为 onclick="comp()" 并在 JS 中 window.comp = comp |
| 函数逻辑未执行 | nm/pwd 未在 comp() 前更新 | 在 comp() 开头调用 incre()，或统一由 input 事件维护状态 |
| 前端直连 MySQL | mysql2 不支持浏览器环境 | 必须移除前端数据库操作，改用安全的后端接口 |
遵循以上修改，你的登录逻辑即可正常触发。记住：模块不是魔法，而是约束；内联不是捷径，而是妥协——拥抱事件监听，才是可持续开发的起点。
