【JavaScript】クリックイベント

この記事では、JavaScriptのクリックイベントを実装するプログラミングコードについて解説します。

クリックすると青のボックスが赤に変わる

See the Pen js01 by aqua (@aqua-programdiary) on CodePen.

HTMLコード

<div class="box"></div>

CSSコード

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
}

JavaScriptコード

const box = document.querySelector('.box');
box.addEventListener('click',function(){
    box.style.backgroundColor = 'red';
});

解説

• <div class="box"></div>:
  ページに表示されるボックス要素です。クラス名 .box が指定されており、CSS スタイルが適用されます。
  
• .box { ... }:
  .box クラスの CSS スタイルが定義されています。このスタイルは、ボックスの幅、高さ、背景色などを指定します。
  
• const box = document.querySelector('.box');
querySelector メソッドを使用して、.box クラスを持つ要素を取得し、box という名前の変数に格納しています。
  
• box.addEventListener('click',function(){ ... });
box 要素に対してクリックイベントのリスナーを追加しています。クリックが発生したときに実行される関数が定義されています。
  
• box.style.backgroundColor = 'red';
  クリックイベントが発生したときに、box 要素の背景色を赤に変更します。style プロパティを使用して要素のスタイルを変更できます。
  

クリックするとボックスのクラスをトグルして色を切り替える

See the Pen js01-1 by aqua (@aqua-programdiary) on CodePen.

HTMLコード

<div class="box red"></div>

CSSコード

.box {
    width: 200px;
    height: 200px;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

JavaScriptコード

const box = document.querySelector('.box');
box.addEventListener('click',function(){
    box.classList.toggle('blue');
});

解説

• <div class="box red"></div>:
  ページに表示されるボックス要素です。クラス名 .box と .red が指定されており、それぞれの CSS スタイルが適用されます。
  
• .box { ... }:
  .box クラスの CSS スタイルが定義されています。このスタイルは、ボックスの幅と高さを指定します。
  
• .red { ... }:
  .red クラスの CSS スタイルが定義されています。このスタイルは、ボックスの背景色を赤に設定します。
  
• .blue { ... }:
  .blue クラスの CSS スタイルが定義されています。このスタイルは、ボックスの背景色を青に設定します。
  
• const box = document.querySelector('.box');
querySelector メソッドを使用して、.box クラスを持つ要素を取得し、box という名前の変数に格納しています。
  
• box.addEventListener('click', function() { ... });
box 要素に対してクリックイベントのリスナーを追加しています。クリックが発生したときに実行される関数が定義されています。
  
• box.classList.toggle('blue');
  クリックイベントが発生するたびに、box 要素のクラスリストに .blue クラスをトグル（追加または削除）します。したがって、ボックスの背景色が青と赤の間で切り替わります。
  

クリックするとボックスのサイズが変わる

See the Pen js01-2 by aqua (@aqua-programdiary) on CodePen.

HTMLコード

<div class="box"></div>

CSSコード

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
}
.mini-box {
    width: 100px;
    height: 100px;
    background-color: blue;
}

JavaScriptコード

const box = document.querySelector('.box');
box.addEventListener('click',function(){
    box.classList.remove('box');
    box.classList.add('mini-box');
});

解説

• <div class="box"></div>:
  ページに表示されるボックス要素です。.box クラスが指定されており、対応する CSS スタイルが適用されます。
  
• .box { ... }:
  .box クラスの CSS スタイルが定義されています。このスタイルは、ボックスの幅と高さ、背景色を指定します。
  
• .mini-box { ... }:
  .mini-box クラスの CSS スタイルが定義されています。このスタイルは、ボックスの幅と高さ、背景色を指定します。.mini-box クラスのスタイルは、.box クラスと同じスタイルですが、サイズが小さくなっています。
  
• const box = document.querySelector('.box');
querySelector メソッドを使用して、.box クラスを持つ要素を取得し、box という名前の変数に格納しています。
  
• box.addEventListener('click', function() { ... });
box 要素に対してクリックイベントのリスナーを追加しています。クリックが発生したときに実行される関数が定義されています。
  
• box.classList.remove('box');
box 要素のクラスリストから .box クラスを削除します。これにより、.box クラスに関連するスタイルが適用されなくなります。
  
• box.classList.add('mini-box');
box 要素のクラスリストに .mini-box クラスを追加します。これにより、.mini-box クラスに関連するスタイルが適用されます。したがって、要素のスタイルが変更されます。