如何顯示/隱藏內容

Question

我有一個頁面，我想要兩個按鈕，當點擊一個按鈕時，顯示hello，當另一個按鈕被點擊時會隱藏「hello」消息，然後顯示「再見」。我知道這需要在JavaScript中完成，但我不擅長JavaScript。

Answer 1

檢查這個片段

<p id="msg"></p> 
 

 
<button onclick="helloFunction()">Say Hello</button> 
 
<button onclick="byeFunction()">Wave Goodbye</button> 
 

 
<script> 
 
function helloFunction() { 
 
    document.getElementById("msg").innerHTML = "Hello"; 
 
} 
 
    
 
    function byeFunction() { 
 
    document.getElementById("msg").innerHTML = "Goodbye"; 
 
} 
 

 
</script>

Answer 2

有幾個方法可以做到這一點，其中一個將影響DOM元素的可見性，其打招呼或再見，另一種方法如下圖所示，您實際上會根據按下哪個按鈕來更改dom對象的文本

<button onClick="javascript:say('Hello');">Say Hi</button> 
<button onClick="javascript:say('Goodbye');">Say Goodbye</button> 
<div id="TextField"></div> 
<script> 
    function say(text) { 
     var element = document.getElementById("TextField"); 
     element.innerHTML = text; 
    } 
</script> 

Answer 3

在這裏你需要實現這樣的壯舉。

首先創建一個div或p標籤來保存UR文字和兩個按鈕 如

<div id="container">Hello</div> 
    <button id="show">Show</button> 
    <button id="hide">Show</button> 

確保您的div有一個id，你太按鈕。你用它作爲參考。

然後，在JavaScript，你可以切換div

<script type="text/javascript"> 
     //Declare variable 
    var div = document.getElementById("container"); 
    var show = document.getElementById("show"); 
     var hide = document.getElementById("hide"); 

    //run when windows fully loads 
    window.onload = function(){ 

     //when i click show button 
     show.onclick = function(){ 
       div.style.display = "block"; 
      } 

     //when i click hide button 
     hide.onclick = function(){ 
       div.style.display = "none"; 
      } 

     } 

     //That is champ, this is all vanilla javascript. You can also look    into implementing with jquery. 
    </script>