前回、JavaScriptを使ってボタンクリック時に画面に要素を表示させる方法をお話しましたが、その続きです。今回はクリックで「表示・非表示」できるようにします。
前回のお話はこちら▼
要素を非表示にする（display:none）
こちらは前回と同じですが、まずは要素が画面に表示されないように予め非表示にしておき、idを加えます。
<div style="width:200px;height:200px;background:black;display:none;" id="clickbtn1"></div>クリックで画面に表示させる
前回と同じスクリプトのコードです。クリックすると画面にclickbtn1の要素が表示されます。
<script>
function clickDeView(){
document.getElementById("clickbtn1").style.display = "block";
}
</script>こちらに「非表示にします」を追加して、関数をもう１パターン追加すれば出来上がります。
[rml_read_more]
<div style="width:200px;height:40px;background:skyblue;" onclick="clickDeView()">表示します</div>
<div style="width:200px;height:40px;background:aquamarine;" onclick="clickDeView2()">非表示にします</div>
<div style="width:200px;height:200px;background:yellow;display:none;" id="clickbtn1">表示されました！</div>
<script>
function clickDeView(){
document.getElementById("clickbtn1").style.display = "block";
}
function clickDeView2(){
document.getElementById("clickbtn1").style.display = "none";
}
</script>これで「表示します」「非表示にします」をそれぞれクリックすると、表示を切り替えることができるようになります。
実行してみます。
表示します
非表示にします
これで、要素をクリックすると、要素の表示・非表示が切り替わります！
まとめ
このような感じで、document.getElementById(“clickbtn1”).style.displayを使うと、画面の要素の表示・非表示を切り替えることができます。
ご参考ください😃
