JavaScript中Button onclick事件无法触发弹窗的问题排查

阿华AIGC实验室

2026-5-11

问题排查与修复方案

我帮你找到了几个核心问题，这就是你的登录/注册按钮没触发预期效果的原因：

1. 表单默认提交行为导致页面刷新

你的按钮嵌套在<form>标签内，按钮默认类型是submit，点击后会自动触发表单提交，导致页面刷新重载——这就是为什么你看到输入框被清空，而且alert弹窗根本来不及显示的原因。

解决方法很简单：给按钮明确设置type="button"，避免触发默认提交行为：

<!-- 登录页面的按钮 -->
<button type="button" onclick="loginUser()">Login</button>

<!-- 注册页面的按钮 -->
<button type="button" onclick="registerUser()">Register</button>

2. JavaScript代码的语法/拼写错误

你的script.js里有几处错误，直接导致函数无法正常执行：

DOM方法拼写错误：getElementbyClassName应该是getElementsByClassName（注意E大写，末尾带s，因为它返回的是元素集合）
AJAX语法错误：registerUser函数里的$.ajax{( 多了一个左括号，应该是$.ajax({；同时success属性后缺少逗号，还有respons拼写错误（正确是response）

修正后的`script.js`代码：

var url = "http://localhost:8888";
function test(){ console.log('hello'); }
function registerUser(){
 alert("I work!");
 var username = document.getElementsByClassName("username");
 var password = document.getElementsByClassName("password");
 $.ajax({
 url: url + "/register",
 method: "post",
 data: { username: username[0].value, password: password[0].value },
 success: function(response){
 alert(response.message);
 }
 }).error(function(response){
 alert(response.message);
 });
}
function loginUser(){
 alert("I work!");
 var username = document.getElementsByClassName("username");
 var password = document.getElementsByClassName("password");
 $.ajax({
 url: url + "/login",
 method: "post",
 data: { username: username[0].value, password: password[0].value }
 }).success(function(response){
 alert(response.message);
 }).error(function(response){
 alert(response.message);
 });
}