Как я могу остановить окно оповещения от закрытия самого себя?

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>

попытался отобразить окно с сообщением об ошибке, и оно работало нормально, пока я не изменил свойства экрана. теперь он появляется, а затем автоматически исчезает менее чем за секунду. Я пытался проверить на ошибки. я менял коды в разное время, используя css, js и jquery. но во всех этих случаях произошло то же самое. пожалуйста, позаботьтесь, чтобы помочь.

Answer 1

Проблема в том, что когда вы нажимаете кнопку отправки, форма отправляется.

Чтобы исправить это, давайте создадим прослушиватель событий для отправки формы. Если мы обнаружим ошибку, мы не позволим ей продолжить отправку, а вместо этого покажем сообщение об ошибке. Мы делаем это с помощью 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";

Answer 2

Попробуйте использовать

type="button"

in

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