當使用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?。

從onclick處理程序返回false以防止任何默認的瀏覽器操作。

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