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?を参照してください。

返信falseonclickハンドラから、デフォルトのブラウザアクションを防止します。

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