.addEventListener()

JavaScriptの.addEventListener()でボタンクリックで画像の切り替え

2023年7月29日 7分

JavaScriptの .addEventListener() を使ってボタンクリックで画像を切り替えするのと同時に、JavaScriptのループを使って「どのボタンが現在アクティブなのか？」を視覚的に切り替えます。

応用も効かせやすいコードなので、参考にしてみてください。

.addEventListener()
ボタンクリックで画像の切り替えのサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.addEventListener()

.addEventListener()は、指定したイベントが対象となるオブジェクトに配信されると、通知を受け取るリスナーを設定するために使用されるメソッドです。

リスナーは関数または関数を処理するオブジェクトであり、特定のタイプのイベントが発生すると呼び出されます。

例えば、次のコードではクリックイベントに対してリスナーを設定します。

document.getElementById("myBtn").addEventListener("click", function(){
  alert("ボタンがクリックされました！");
});

「myBtn」というidを持つ要素がクリックされたときに、”ボタンがクリックされました！”というアラートメッセージが表示されます。.addEventListener()を使用することで、多くの異なるイベントに対してカスタムの動作を簡単に実装することができます。

ボタンクリックで画像の切り替えのサンプル

早速サンプルです。

画像1〜4までのボタンが並んでいますが、クリックすることでその下部にある画像が切り替わります。

また、クリックされているボタンの背景色がグレー色に変わり、どれが選択されているかも分かる仕様です。

実装の手順と方法

コードの詳細の前に、実装の手順と方法について解説していきます。

HTMLを記述

まずは、HTMLを記述します。

設置したい場所に記述しましょう。

コードを表示

<div class="btnWrapper">
    <button class="btn show" id="btn1">画像1</button>
    <button class="btn" id="btn2">画像2</button>
    <button class="btn" id="btn3">画像3</button>
    <button class="btn" id="btn4">画像4</button>
</div>

<img id="img" src="https://source.unsplash.com/bIhpiQA009k" />

JavaScriptを記述

次に、JavaScriptのコードを記述します。

コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

// 各ボタンの要素を取得
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');

// 全てのボタンを配列として取得
var allButtons = document.getElementsByClassName('btn');

// 画像の要素を取得
var img = document.getElementById('img');

// ボタンがクリックされたときの処理を設定
btn1.addEventListener('click', function() {
    changeImage('https://source.unsplash.com/bIhpiQA009k');
    setActiveButton(btn1);
});

btn2.addEventListener('click', function() {
    changeImage('https://source.unsplash.com/wbOKjgQv3nY');
    setActiveButton(btn2);
});

btn3.addEventListener('click', function() {
    changeImage('https://source.unsplash.com/LEC8AlLmpUA');
    setActiveButton(btn3);
});

btn4.addEventListener('click', function() {
    changeImage('https://source.unsplash.com/ckfXPMb2_BI');
    setActiveButton(btn4);
});

// 画像を切り替える関数
function changeImage(path) {
    img.src = path;
}

// アクティブなボタンを設定する関数
function setActiveButton(activeButton) {
    // すべてのボタンから 'show' クラスを削除
    for (var i = 0; i < allButtons.length; i++) {
        allButtons[i].classList.remove('show');
    }

    // アクティブなボタンに 'show' クラスを追加
    activeButton.classList.add('show');
}

CSSを記述

最後にCSSを書きましょう。

コードを表示

.btnWrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.btnWrapper button.btn.show {
    background: #707070;
    color: #fff;
}

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。ざっくりですが、順に解説していきます。

HTML

HTMLは、4つのボタンと1つの画像要素から成るシンプルな構造です。

ボタンはそれぞれにID（'btn1'、'btn2'、'btn3'、'btn4'）を持ち、全てが同じclass名「btn」を使用しています。

この共通のclass名は、JavaScriptで操作してスタイルを適用するために使用されます。

初めのボタン「btn1」は追加の「show」classを持っており選択されている状態を示すために使用しています。

<div class="btnWrapper">
    <button class="btn show" id="btn1">画像1</button>
    <button class="btn" id="btn2">画像2</button>
    <button class="btn" id="btn3">画像3</button>
    <button class="btn" id="btn4">画像4</button>
</div>

<img id="img" src="https://source.unsplash.com/bIhpiQA009k" />

そして、画像要素は特定の画像のURLを初期ソースとして設定しています。このソースはJavaScriptによって動的に変更されます。

かかかず

imgタグの画像は、unsplashの画像を置いています。

JavaScript

JavaScriptのコードは、はじめに4つのボタンと画像要素を取得しています。次に、各ボタンに対しaddEventListenerメソッドを用いてクリックイベントリスナーを設定します。

これにより、各ボタンがクリックされたときに特定のURLから画像を読み込み、その画像をページ上の指定された位置に表示します。

// 各ボタンの要素を取得
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');

// 全てのボタンを配列として取得
var allButtons = document.getElementsByClassName('btn');

// 画像の要素を取得
var img = document.getElementById('img');

// ボタンがクリックされたときの処理を設定
btn1.addEventListener('click', function() {
    changeImage('https://source.unsplash.com/bIhpiQA009k');
    setActiveButton(btn1);
});

btn2.addEventListener('click', function() {
    changeImage('https://source.unsplash.com/wbOKjgQv3nY');
    setActiveButton(btn2);
});

btn3.addEventListener('click', function() {
    changeImage('https://source.unsplash.com/LEC8AlLmpUA');
    setActiveButton(btn3);
});

btn4.addEventListener('click', function() {
    changeImage('https://source.unsplash.com/ckfXPMb2_BI');
    setActiveButton(btn4);
});

// 画像を切り替える関数
function changeImage(path) {
    img.src = path;
}

// アクティブなボタンを設定する関数
function setActiveButton(activeButton) {
    // すべてのボタンから 'show' クラスを削除
    for (var i = 0; i < allButtons.length; i++) {
        allButtons[i].classList.remove('show');
    }

    // アクティブなボタンに 'show' クラスを追加
    activeButton.classList.add('show');
}

さらに、選択されたボタンには「show」のclass名が追加され、非アクティブなボタンからは「show」classが削除されます。これにより、現在選択中のボタンを視覚的に強調させています。

CSS

CSSは、ボタンをフレキシブルに配置し、アクティブなボタンを視覚的に強調する役割を果たしています。

「btnWrapper」では、ボタンを均等に水平に並べ、必要に応じて折り返します。「show」のclass名を持つ要素は、灰色の背景と白いテキストで強調表示されます。

.btnWrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.btnWrapper button.btn.show {
    background: #707070;
    color: #fff;
}