hiding div on load and displaying after button click

September 9, 2022

im currently learning css/js/php
everytime i click the button it shows the div by split second and the hides it again immediately
can someone help
this is the part of the code that im talking about

function showError() {
  document.getElementById('error').style.display = "block";
}

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

>Solution :

<form>
<input type="password">
<div id="error" style="display: none;">Invalid Password
</div>
<button type="button" onclick="return showError()">LOG IN</button>
</form>
<script>
function showError(){
document.getElementById('error').style.display="block";
}
</script>

There are couple of mistakes first the span tag should be removed since its not closed properly and div should be closed correctly and button should be outside the div tag and mostly importantly button type should not be submit it should be button if its submit the form will be submitted and page will reload as a result it will show the div again