加载时隐藏 div 并在单击按钮后显示

Question

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>

Answer 1

 <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