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 does disappear, but then 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

See What's the standard behavior when < button > tag click?.

Return false from the onclick handler to prevent any default browser action.

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

Answer 2

?

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

window.other_ = function() {
   document.getElementById("idein").style.display = "none";
}

.display-none{
display:none;
}

<button id="myDIV" onclick="fncShowHide(); return false;">Try it</button>
<div id="idein">BYEEEEEEEEEEEEEEEEEEEEEEEEEEE!</div>
<script>

</script>