divをクリックしてテキストを非表示にする

イベントonclickに関する質問があります。私は研究中にこのコードを見つけました。私の質問です：テキストがすでに表示されているクリックの前でさえ、実際のボタンをクリックするまで、テキストを隠すことは可能ですか？そして、それ以上のオンクリックイベントを別々に行うことは可能ですか？divをクリックしてテキストを非表示にする

<html> 
 
<head> 
 
    <title>Show and hide div with JavaScript</title> 
 
    <script> 
 
    function showhide() 
 
    { 
 
      var div = document.getElementById("newpost"); 
 
    if (div.style.display !== "block") { 
 
     div.style.display = "block"; 
 
    } 
 
    else { 
 
     div.style.display = "none"; 
 
    } 
 
    } 
 
    </script> 
 
</head> 
 
<body> 
 
    <div id="newpost"> 
 
    <p>This div will be show and hide on button click</p> 
 
    </div> 
 
    <button id="button" onclick="showhide()">Click Me</button> 
 
</body> 
 
</html>

出典

2017-12-05 Krystel_T

ありがとうdisplayプロパティのスタイルでどれもデフォルトでそれを作ります。

<div id="newpost" style="display:none"> 
    <p>This div will be show and hide on button click</p> 
    </div>

出典

2017-12-05 14:08:44

はい。あなたのスタイルシートで#newpost div display: noneを持っていて、修飾子クラス.visibleをdisplay: blockで追加してください。最後に、あなたの関数であなたがclassList.toggle経由.visibleクラスを切り替えることができ、あなたが行くように良いことがあります：

var div = document.getElementById('newpost'); 
 

 
document.getElementById('button').addEventListener('click', showhide); 
 

 
function showhide() { 
 
    div.classList.toggle('visible'); 
 
}

#newpost { 
 
    display: none; 
 
} 
 

 
#newpost.visible { 
 
    display: block; 
 
}

<button id="button">Click Me</button> 
 

 
<div id="newpost"> 
 
    <p>This div will be show and hide on button click</p> 
 
</div>

出典

2017-12-05 14:12:24

複数のonclickイベントを同じテーブル上にあるが異なるセルに配置することは可能ですか？ –

うん。あなたはあなたのセルをループする必要があり、ループ内でそれに応じてイベントリスナーを追加します。 –

はあなたのコードにこの単純なCSSを適用

div#newpost{ 
 
display: none; 
 
}

出典

2017-12-05 14:12:34

幸せなあなたがそうのようなボタンにクリックイベントで複数を追加することができますjQueryので:)

function showhide() { 
 
    var div = document.getElementById("newpost"); 
 
    div.classList.toggle('hidden'); 
 
}

.hidden{ 
 
display : none; 
 
}

<html> 
 
<head> 
 
    <title>Show and hide div with JavaScript</title> 
 
    
 
</head> 
 
<body> 
 
<!--if you want by default hidden then add class .hidden in new post --> 
 
    <div id="newpost" class="hidden"> 
 
    <p>This div will be show and hide on button click</p> 
 
    </div> 
 
    <button id="button" onclick="showhide()">Click Me</button> 
 
</body> 
 
</html>

出典

2017-12-05 14:13:38

コーディング：

 $("#button").on("click", function(){ 
 
     $("#newpost").toggle(); 
 
    }); 
 
     
 
    $("#button").on("click", function(){ 
 
     $("#secondpost").toggleClass("bold"); 
 
    });

#newpost{ 
 
    display:none; 
 
} 
 

 
.bold{ 
 
    font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
    <title>Show and hide div with JavaScript</title> 
 
</head> 
 
<body> 
 
    <div id="newpost"> 
 
    <p>This div will be show and hide on button click</p> 
 
    </div> 
 
    <button id="button">Click Me</button> 
 
    <p id="secondpost">toggle bold</p> 
 
</body> 
 
</html>

クリックで最初の上記の段落を切り替えます。 2回目のクリックは、太字にする最後の段落のクラスを切り替えます。

出典

2017-12-05 15:01:00

divをクリックしてテキストを非表示にする

答えて

関連する問題