メニュー
お問い合わせ
お問い合わせ
  1. ホーム
  2. プログラミング
  3. 【JavaScript】クリックイベント

【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 クラスに関連するスタイルが適用されます。したがって、要素のスタイルが変更されます。
プログラミング
JavaScript
目次