page reloads when using document.getElementById

Question

Im using the js function shown below to make a part of page disappear when user clicks on the button. but when i click on the button, the part disappears, but page reloads. why is it like this?

<button id="myDIV" onclick="fncShowHide()">Try it</button>

<script>
window.fncShowHide = function() {
   document.getElementById("idein").className = "display-none";
}
</script>

Answer 1

it happens because the button is submitting a form (most probably) try adding this to your html

<button id="myDIV"  type="button" onclick="fncShowHide()">Try it</button>