【javascript】クリックで色や画像を切替える方法を初心者向けに徹底解説！

クリックして対象物を変化させるにはクリックイベントを利用しますが、その「設定方法」には大きく分けて次の３つがあります。

また、「処理結果」として、以下のようにクリックすることで色や画像などに変化を起こすことができます。

実際にクリックして確かめてみよう！

このように、クリックイベントを設定することで、Webページにさまざまな変化を起こすことができます。

できるだけわかりやすく解説するので、ぜひ最後まで読んでみて下さいね！

 📖目次に戻る

クリックイベントの３つの設定方法

冒頭で説明した３つのクリックイベントの設定方法を順番に解説します。

クリックされると「クリックされました」とアラートが表示されるボタンを例に、まずはonclick属性にイベントハンドラを設定する方法からみてみましょう。

 📖目次に戻る

HTMLのonclick属性を使用する

onclick属性を使用して、関数を指定します。

javascriptで「クリックされました」というアラートを表示する関数を用意し、HTMLで対象要素のonclick属性にその関数を指定します。

 javascript
function hello(){
alert('こんにちは');
} 

 
<input type="button" value="ボタン" onclick="hello()"> 

 
input{
width:80px;
height: 40px;
border: 2px solid #000;
border-radius: 10px;
cursor: pointer;
}

では詳しく見ていきましょう。

まずは「hello」という関数の中に、「こんにちは」というアラートが表示される処理を書きます。

次に、HTMLの対象要素に、onclick属性を付与しjavascriptで用意した関数「hello()」を記述します。

これで動きは実装されたよ！あとは、cssで見た目の調整をして完成だね！

 📖目次に戻る

onclickプロパティを使用する

onclickプロパティを使用してアラートを表示する関数を設定します。

対象要素に（.）ドットを使用してonclickを繋ぎ、イベントハンドラを登録します。

 javascript
const button = document.getElementById("hello_btn");
function hello() {
alert('こんにちは');
}
button.onclick = hello;

 
<input id="hello_btn" type="button" value="クリック" /> 

 
input{
width:80px;
height: 40px;
border: 2px solid #000;
border-radius: 10px;
cursor: pointer;
}

まずは、HTMLの対象要素に「hello_btn」というidを設定します。

次に、javascriptのgetElementById関数で取り出した要素を定数「button」に代入するための記述を行います。

もちろん、アラートを表示する関数「hello()」も用意します。

最後に、用意した「button」の後ろにドット( . )で繋いだonclickプロパティの値に、アラートを表示する関数「hello」を設定すると完成です。

helloに()をつけたままだとうまく動かないから注意しようね！

 📖目次に戻る

addEventListenerメソッドの引数にclickを指定する

addEventListenerメソッドを使用してアラートを表示する関数を設定します。

対象要素に、（.）ドットを使用してaddEventListenerを繋ぎます。

addEventListenerの２つ引数には、イベント名と、実行する関数をそれぞれ設定します。

 javascript
const button = document.getElementById("hello_btn");
function hello(){
alert('こんにちは');
}
button.addEventListener( "click" , hello ); 

 
<input id="hello_btn" type="button" value="クリック" /> 

 
input{
width:80px;
height: 40px;
border: 2px solid #000;
border-radius: 10px;
cursor: pointer;
} 

先程と同様に、まずはHTMLの対象要素に「hello_btn」というidを設定します。

javascriptのgetElementById関数で取り出した要素を定数「button」に代入するための記述を行います。

対象要素「button」にaddEventListenerメソッドを繋ぎ、2つの引数を指定します。

１つ目の引数にはイベントである「click」を、２つ目の引数には実行する関数である「hello」を設定すると完成です。

なお、一つ目の引数のイベントは、イベントハンドラではなく「イベント自体」を指定しているのでonは付けません。

次からは、これらの方法を交えて実際にボタンをクリックして色や画像を変えるボタンを作ってみるよ！

 📖目次に戻る

クリックで色の切替え

対象要素自体をクリックすることで「緑 → オレンジ」「オレンジ → 緑」と色が切り替わるボタンを作ります。

ここでは、対象要素にonclick属性を設定し、クリック時にtoggleメソッドでcssの切り替えを行います。

 javascript
const button = document.getElementById("box");
function changeColor(){
button.classList.toggle("orange");
}

 
<div id="box" onclick="changeColor()"></div>

 
#box{
width: 140px;
height: 140px;
cursor: pointer;
background-color: #3CB371;
}
#box.orange{
background-color: #FF8C00;
}
#box p{
line-height: 140px;
vertical-align: middle;
font-size: 20px;
font-weight:bold;
}

それでは、作成方法を順を追って確認していきましょう！

まずは、id「box」を付与したhtmlの要素を用意します。

この要素をボタンとして扱うため、onclick属性を付与し、クリック時に呼び出すための関数「changeColor」を設定します。

用意した要素に対し、cssでボタンの大きさなどと一緒に、クリックされる前の色を指定します。

色は緑「#3CB371」にします。

次に、クリックされた後の色を指定します。

先程のクラス名に、任意のクラス名「orange」を付与したクラスを新たに用意し、クリックされた後の色を記述します。

色はオレンジ「#FF8C00」にします。

最後に、classListとtoggleを使って、色を変えるための関数「changeColor」を作成します。

この関数は呼び出されるたびに、対象要素のcssに「orange」というクラスを付けたり外したりする関数です。

クリックされると関数「changeColor」が実行されるため、対象要素にクラス「#box .orange」が付いたり外れたりします。

つまりクリックされるたびに、色が変わります。

これで、色の切り替わるボタンの完成です。

仕組みがわかると意外と簡単だね！

 📖目次に戻る

クリックで画像の切替え

スイッチの画像をクリックすることで、スイッチ自身と電球の画像が切り替わるボタンを作ります。

ここでは、addEventListenerメソッドを使用して、クリック時にtoggleメソッドで画像の切り替えを行います。

htmlファイルと同階層に、上記の４つの画像が入ったimgフォルダを準備している想定で解説します。

 javascript
const switchImg = document.getElementById("switch");
const lightImg = document.getElementById("light");
function changeImg(){
switchImg.classList.toggle("on_switch");
lightImg.classList.toggle("on_light");
}
switchImg.addEventListener("click",changeImg);

 
<div id="switch"></div>
<div id="light"></div>

 
#switch{
width: 30px;
height: 40px;
background: url(img/s_off.png) no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
#switch.on_switch{
background: url(img/s_on.png) no-repeat;
background-size: 100% 100%;
}
#light{
width: 140px;
height: 140px;
background: url(img/off.png) no-repeat;
background-size: 100% 100%;
}
#light.on_light{
background: url(img/on.png) no-repeat;
background-size: 100% 100%;
}

それでは、作成方法を順を追って確認していきましょう！

まずは、htmlで「スイッチ」と「ライト」になる要素を用意します。

それぞれにid「switch」「light」を設定しましょう。

併せて、cssでクリックされる前の設定をします。

画像もクリックされる前のもの（s_off.png , off.png）を指定します。

次に、クリックされた後の画像を設定します。

先程のクラス名に、任意のクラス名「on_switch」「on_light」を付与したクラスを新たに用意し、クリックされた後の画像（s_on.png , on.png）を指定します。

今度は、javascriptでclassListとtoggleを使って、画像を変えるための関数「changeImg()」を作成します。

この関数は、呼び出されるたびに、対象要素のcssにクラスを付けたり外したりする関数です。

htmlの要素をそれぞれの定数「switchImg」「lightImg」に格納し、クラスを切り替える関数の準備をします。

最後に、addEventListenerメソッドを使用して、クリック時に画像を切り替える関数「changeImg()」を呼び出す処理を記述します。

クリックされる要素「switchImg」にドット(.)でaddEventListenerを繋ぎ、１つ目の引数にイベント名の「click」を、２つ目の引数に先程用意した関数「changeImg()」を設定します。

以上で、画像が切り替わるスイッチの完成です。

今覚えたテクニックを使って、色々と応用してみてね！

📖目次に戻る

最後に

いかがでしたでしょうか、今回はjavascriptの「クリックイベント」について解説しました。

今回は色と画像の切り替えを行いましたが、他にも色々と応用することができるので色々試してみて下さいね。

他のjavascriptのパーツについても知りたくなった方は、こちらも覧ください！

最後までお読みいただき、ありがとうございました！