页面加载时隐藏div，点击提交按钮后显示随即消失问题求助

问题出在你的登录按钮是type="submit"类型，点击后会触发表单的默认提交行为，导致页面刷新——这就是错误提示刚显示就立刻消失的原因。

下面提供两种可行的解决方法：

方案一：修改按钮类型为button #

直接把按钮的type="submit"改成type="button"，这样就不会触发表单提交，错误提示能正常保留显示：

<form>
  <input type="password">
  <div id="error" style="display: none;">Invalid Password</div>
  <br/>
  <button type="button" onclick="showError()">LOG IN</button>
</form>

方案二：阻止表单默认提交行为 #

如果需要保留submit类型（比如后续要做表单验证后再提交），可以通过JS阻止表单的默认提交动作：

方法1：在点击事件中传入并阻止默认行为 #

修改HTML的按钮点击事件，传入event对象：

<button type="submit" onclick="showError(event)">LOG IN</button>

对应的JS函数修改为：

function showError(e) {
  e.preventDefault(); // 阻止表单提交的默认行为
  document.getElementById('error').style.display = "block";
  
  // 后续如果需要验证通过后提交表单，可以添加如下代码：
  // if (验证通过) {
  //   e.target.form.submit();
  // }
}

方法2：给表单添加submit事件监听 #

去掉按钮上的onclick，给表单绑定submit事件，在事件处理函数中阻止默认行为：

<form>
  <input type="password">
  <div id="error" style="display: none;">Invalid Password</div>
  <br/>
  <button type="submit">LOG IN</button>
</form>

对应的JS代码：

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  document.getElementById('error').style.display = "block";
  
  // 这里可以添加你的密码验证逻辑，验证通过后再调用submit()提交表单
  // if (passwordValid) {
  //   this.submit();
  // }
});

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