コンテンツの表示/非表示方法

Question

私はクリックしたときに表示され、表示され、もう一方がクリックされたときに、「こんにちは」メッセージを隠して「さようなら」を表示する2つのボタンがあるページを持っています。私はこれが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

ここでそのような偉業を達成するために必要なもの

最初ウルテキストと2つのボタン 例えば

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

を保持するためのdivやpタグを作成するには、あなたの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>