如何阻止警报框自行关闭？

Question

 document.getElementById("error").style.display = "none"; document.getElementById("submit").onclick = function() { document.getElementById("error").style.display = ""; }

 .alert-er { padding: 20px; background-color: #ff2400; color: #ffffff; font-size: 20px; border: 1px solid white; border-radius: 20px; }.closebtn { margin-left: 15px; color: white; font-weight: bolder; float: right; font-size: 40px; line-height: 20px; cursor: pointer; transition: 0.3s; }.closebtn:hover { color: black; }

 <div id="error" class="alert-er"> <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> <strong>Error!</strong> </div> <form> <button type="submit" id="submit" class="submit">Submit</button> </form>

a 试图显示一个显示错误的警告框，并且在我更改显示属性之前它工作正常。 现在它出现，然后在不到一秒钟的时间内自动消失。 我试着检查错误。 我使用 css、js 和 jquery 更改了不同时间的代码。 但在所有这些情况下，情况都是一样的。 请注意帮助。

Answer 1

尝试使用

type="button"

在

<button type="button" id="submit" class="submit">Submit</button></form>

<div id="error" class="alert-er">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
    <strong>Error!</strong> 
</div>  
<form>
    <button type="button" id="submit" class="submit">Submit</button>
</form>

Answer 2

问题是当您单击提交按钮时，表单正在被提交。

为了解决这个问题，让我们为表单提交时创建一个事件监听器。 如果我们发现错误，我们不会让它继续提交，而是显示错误消息。 我们在 event.preventDefault() 的帮助下做到这一点：

const form = document.querySelector('form');
const errorMessage = document.getElementById("error");

form.addEventListener('submit', (event) => {

  if(thereIsAnError()){
    event.preventDefault();
    errorMessage.style.display = "block";
  }

})

function thereIsAnError(){
    return true; // later, change this function to return true or false depending on your input values
}

document.getElementById("error").style.display = "none";