按钮点击时JavaScript函数无响应问题求助

你写的按钮点击后没反应，核心问题有两个：

• 你把事件绑定逻辑放在了test()函数里，而test()是通过按钮的onclick触发的。第一次点击按钮时，只是给按钮绑定了点击事件，但并没有执行事件里的代码；等第二次点击时，表单又会因为submit按钮的默认行为刷新页面，所以永远看不到预期效果。
• 按钮是type="submit"，点击后会触发表单提交，页面直接刷新，就算事件绑定成功，代码也来不及执行。

修复后的代码 #

JavaScript 代码 #

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const submitBtn = document.getElementById("submitZip");
  submitBtn.addEventListener("click", function(event) {
    // 阻止表单默认提交行为，避免页面刷新
    event.preventDefault();
    
    const zip = document.getElementById('zip').value;
    const helloLabel = document.getElementById('hello');
    
    this.innerText = "Loading...";
    console.log("TEST");
    console.log("输入的邮编：", zip);
  });
});

HTML 代码 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
  <form class="input">
    <h1 class="title"> Find A Pet Near You! </h1>
    <label for="zip" id="hello">Zip</label>
    <input type="text" name="zip" id="zip">
    <!-- 去掉onclick属性，直接通过JS绑定事件 -->
    <button type="submit" id="submitZip"> Submit </button>
  </form>
</body>
<script src='script.js'></script>
</html>

关键修改点 #

• 去掉按钮的onclick="test()"，改用DOMContentLoaded事件在页面加载完成后绑定按钮点击事件，避免重复绑定或绑定时机不对。
• 添加event.preventDefault()阻止表单提交的默认行为，这样页面就不会刷新，事件里的代码能完整执行。
• 简化了变量命名，让代码更易读。

内容的提问来源于stack exchange，提问作者Confused Math Person