代码在CodePen正常运行但在WebStorm中点击按钮无响应无报错

核心差异是JS脚本的执行时机不同：

• CodePen默认会将用户编写的JS代码延迟到整个DOM树解析完成后再执行，因此document.querySelector可以正常获取到.btn0、.user-input等目标节点，点击事件绑定成功，功能正常。
• 在WebStorm中如果将JS代码放在HTML结构的前部（比如<head>标签内、目标DOM节点之前的位置），脚本执行时对应DOM元素还未渲染，querySelector的返回值为null。

你的代码中写了if (submit)的判断逻辑，当submit为null时，整个事件绑定的代码块会直接跳过，既不会执行绑定逻辑，也不会抛出任何控制台报错，最终表现为点击按钮无响应。

两种方案任选其一即可：

• 调整JS代码位置：将所有JS脚本移动到HTML文档的末尾，即</body>闭合标签之前，保证脚本执行时所有DOM节点已经渲染完成。
• 增加DOM加载监听：无需调整脚本位置，将所有JS逻辑包裹在DOMContentLoaded事件回调中，等待DOM解析完成后再执行元素获取和事件绑定，修改后的JS代码如下：

document.addEventListener('DOMContentLoaded', () => {
  const email = document.querySelector('.user-input');
  const submit = document.querySelector('.btn0');
  const error = document.querySelector('.mail-error');

  const showError = () => {
    error.style.display = 'block';
  };

  if (submit) {
    submit.addEventListener('click', (e) => {
      e.preventDefault();
      if (!email.value.match(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/)) {
        return showError();
      }
      document.getElementById("main0").style.display = "none";
      document.getElementById("main1").style.display = "block";
    });
  }
})

修改后可以在元素获取逻辑后加一行打印console.log(submit)，如果控制台输出的是class为btn0的div节点而非null，说明元素获取正常，点击功能即可恢复。

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