HTML页面输入数据时JavaScript代码无法运行

• 先阻止表单默认提交行为：浏览器默认会在表单提交时刷新页面，直接中断JS代码执行。必须在提交事件处理中调用event.preventDefault()，或者通过onsubmit返回false来阻断默认动作。
• 修正事件绑定逻辑：
  • 若用HTML属性绑定，需写成 <form onsubmit="return checkInput()">，必须加return，否则函数执行后仍会触发默认提交。
  • 处理函数示例：

    function checkInput(event) {
      // 先阻止页面刷新
      event.preventDefault();
      // 获取输入值
      const inputVal = document.getElementById("inputBox").value;
      // 触发对应alert
      if (!inputVal) {
        alert("输入不能为空");
      } else if (inputVal.length < 3) {
        alert("输入长度不够");
      } else {
        alert("输入符合要求");
      }
    }
    

• 确认DOM元素匹配：检查getElementById的参数是否和HTML中输入框的ID完全一致，注意大小写。
• 确保JS代码能正确访问DOM：如果脚本放在<head>标签里，要包裹在DOMContentLoaded事件中，保证DOM加载完成后再执行绑定：

  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector("form").addEventListener('submit', checkInput);
  });
  

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