使用document.getElementById时页面重新加载

Question

使用下面显示的js函数，当用户点击按钮时，页面的一部分会消失。

但是当我点击按钮时，该部分确实消失了，然后页面重新加载。 为什么会这样？

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

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

Answer 1

请参阅What's the standard behavior when < button > tag click?。

从false处理程序返回onclick以阻止任何默认的浏览器操作。

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