ポートフォリオ作成と同時並行で、最近は純粋なjavascriptのコーディングを練習しているのですが、いいねボタン実装のときにせっかくだからjavascriptを使おうと思って挑戦したら少し躓いてしまったので、そこんとこメモしとこうと思います。

実現したいこと

複数の要素の中から特定の要素を取得し、その要素にのみ処理を行う。

今回は、「複数のボタンのうち、特定のボタンをクリックしたら、そのボタンのみに処理が行われる」コードを書いていきます。

HTML

まずはhtmlのコードから。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="test.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <div>
            <button class="icon-btn">三橋</button>
        </div>
        <div class="box">
            <button class="icon-btn">阿部</button>
        </div>
        <div class="box">
            <button class="icon-btn">田島</button>
        </div>
        <div class="box">
            <button class="icon-btn">花井</button>
        </div>
    </div>
</body>
</html>

それぞれのbuttonタグに、class="icon-btn"を振っています。

この中のうち一つを取得したいのであれば、まずはclass="icon-btn"全てを取得する必要があります。

Javascript

jsファイルには以下のように記述しました。

test.js

document.addEventListener('DOMContentLoaded',function(){
    var btns = document.querySelectorAll('.icon-btn');
    for(var i = 0; i < btns.length; i++){
        btns[i].addEventListener('click',function(){
            alert('クリックされたよ！');
            this.style.color = 'blue';
        },false);
    }
},false);

順番に見ていきましょう。

※ 3/8 コメントにて文字列リテラルが統一されてないとご指摘を受けたので一部修正しています。

全ての要素を取得

querySelectorはhtmlからタグやらクラスやらidやらを取得してきてくれる良い子です。

getElementsByNameなどより、cssに近い形で記述できるのがいいですね。

しかし、querySelectorはあくまで一番最初に合致した要素しか取得してくれないので、今回実現したいことには向いてません。

なので、querySelectorAllを使用しています。

querySelectorAllは該当する全ての要素を取得してきてくれるので、リストやクラスを取得したいときに便利。

test.js

var btns = document.querySelectorAll('.icon-btn');

今回は、その取得した要素を変数btnsに入れました。

繰り返し処理と特定要素の取得

全ての要素を取得できたので、あとはそれらを繰り返し処理で一つ一つ判別できるようにします。

test.js

for(var i = 0; i < btns.length; i++){
    btns[i].addEventListener('click',function(){
         this.style.color = 'blue';
    },false);
}

まずはfor文でbtnsに格納されている要素の長さ分だけ、変数iに1を足していきます。

そしてbtns[i]のように、iでインデックス番号を表現します。
これでbtnsを一つ一つ判別することができました。

addEventListener

addEventListenerはイベントとそのときの処理について書くことができます。
クリックイベントであれば、onclick="changeColor()"みたいな感じのやつです。

onclickを使っても良かったのですが、最近観たUdemyの動画ではあまりhtmlにjavascriptの処理を書くのは良くないと非推奨にされていたため、今回はaddEventListenerを使用しました。

addEventListener内には、とりあえずボタンのテキストの色を変更するために

test.js

btns[i].addEventListener('click',function(){
     this.style.color = 'blue';
},false);

と書いてます。

thisでクリックされたボタンを持ってきて、そのボタンのテキストの色を変更しているといったイメージでしょうか。

このコードで動かしてもらえれば、正常に動作するはずです。

まとめ

今回はポートフォリオのいいね機能実装のために挑戦しましたが、javascriptは便利機能が多すぎるが故に結構戸惑ってしまいました。

ともあれ純粋なjavascriptコードを書くのは楽しかったので良かったです。

この記事が誰かの参考になれば幸いです。

ではでは。

【Javascript】複数の要素からクリックで特定の要素を取得して処理を行う

実現したいこと

HTML

Javascript

全ての要素を取得

繰り返し処理と特定要素の取得

addEventListener

まとめ