如何阻止警報框自行關閉？

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";