どうも、ソエです!

今回は、HTMLとCSS,JSを使ってクリックしたら非表示になるブロックを作ります。

授業で習ったJSの分からなかったところが理解できたので、忘れないうちにメモ的な感じで書いています。

あくまで忘れないように、メモ的な感じで書いています。
多少見にくい部分もあるかと思いますが、ご了承ください。

書いてあるコードだけでも十分動くように書いているので、そこはご安心を!
では早速!行きましょう!

デモはこちら。

表示


HTMLのコード

まずはHTMLから見てみます。

<div class="block black show"></div>
<div class="block yellow show"></div>
<div class="block pink show"></div>
<div class="block blue show"></div>
<div class="block green show"></div>

divを書き、class(blockとshow)を付けます。
もちろん、このdivをimgにしたりリンクのaにしたりしてもOK!

pinkとかblueはdivの色付けのために付けただけで、特に意味はないです。

CSSのコード

次はCSSを見てみます。

.block{
width: 100px;
height: 100px;
display: none;
}
.show{display: block;}
.black{background: #000;}
.pink{background: #ff75cf;}
.green{background: #8aff75;}
.blue{background: #7a75ff;}
.yellow{background: #f6ff75;}

あれ?blockにdisplay:none;付いてるのに消えないの?と思った方、安心してください、showでdisplay:block;にしているので消えません。

少し不思議ですが、どちらともclassなのでcssの優先順位は同じ。
でも、showの方がblockよりも下に書かれています。
cssは下に書かれているスタイルが、上に書かれている同じスタイルを上書きするので・・・
blockについてたdisplayがshowのdisplayで上書きさせられるのです。

察しのいい人なら、次のJSで何をどうすればいいのか、なんとなく予想はつきますかね?

JSのコード

では、最後にお待ちかねのJSを見ていきましょう。

let block = document.querySelectorAll(".block");
let bt = document.querySelector(".bt");

for(let i=0;i<block.length;i++){
block[i].addEventListener("click",function(){
block[i].classList.remove("show");
});
}

bt.addEventListener("click",function(){
for(let i=0;i<block.length;i++){
block[i].classList.add("show");
}
})

blockは複数あり、全てほしいのでquerySelectorAllでblockすべてを取得してます。
forでループすることにより、blockそれぞれの処理を書かず済みます。
一つ一つ処理を書くのは長くなるし、面倒なのでね・・・

block[i]のiはfor文でblockがある分繰り返しているので、実際にはblock[0]とかblock[1]になっています。
見た目はiだけど、ちゃんと数字に変換されているのですよ。



addEventListenerを使い、クリック時の動作を書いていきます。

クリックしたとき非表示にする、というのが今回のクリック時の動作です。
元々、blockにはdisplay:none;が付いていますが、display:block;を指定しているshowが上書きされているせいでblockは消えていなかったですよね?
ならば、クリック時にこのshowが消えてしまえばいいわけなので、classList.removeで消しましょう。



removeをaddにすれば追加されます。
そして、表示ボタンをクリックすると表示させるようにしたいわけですよね?
ならば、ボタンのクリック時に全てのblockにshowが付くよう指定すればいいわけなので、showを消すときとは違い、classList.addでshowを追加します。
blockは複数あるので、ここでもfor文を使います。



ちなみに、for文の中にaddEventListenerを入れても動きました。
どういうこと?という人の為に、下記に書いておきますね。

let block = document.querySelectorAll(".block");
let bt = document.querySelector(".bt");

for(let i=0;i<block.length;i++){
block[i].addEventListener("click",function(){
block[i].classList.remove("show");
});
}

for(let i=0;i<block.length;i++){
bt.addEventListener("click",function(){
block[i].classList.add("show");
})
}

終わりに

どうでしたかね?

分かりやすいように説明したつもり、なので分かりにくいところが多少あります。

分からない場合は、わからない箇所のタグや属性などで検索すれば説明している記事はたくさんあるので見てみて下さい。

では、ご閲覧ありがとうございました!

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ JavaScript/

忘れないうちにJS復習その1(ブロック非表示)