課題【練習問題（DOM操作/イベント操作）】ーNo.007

課題内容

＜概要＞
　ボタンを３つ用意しましょう。
　ボタンはそれぞれ、順番として、
　１つ目
　２つ目
　３つ目
　がわかるようにボタンを準備します。
　初期表示は１つ目だけ、色が変わった状態にします。
　動きは、３つの中で、色が変わるのは１つだけで、
　押されたボタン：背景色を赤色、文字を白色に変更
　押されたボタン以外：初期の背景色は白色、文字は黒色に変更
　という動きをつけましょう。
　
　実際の表示は、以降の出力結果などを、
　参考にして作ってみましょう。

出力結果

初期表示として、

このような表示になるように、

HTMLで表示を作りましょう。

ボタンを押したときの表示は、

以下のようになります。

ボタンを押した時の背景色の変更

例えば、

初期の表示の状態で、「２つ目」のボタンを押したときは、

このように、

「２つ目」のボタンの背景色が赤色に変更します。

このとき、

最初の「１つ目」のボタンの背景色は白色に変更しています。

同じように、

「３つ目」のボタンを押したときは、

「３つ目」のボタンの背景色が赤色になり、

他の「１つ目」「２つ目」のボタンについては、

背景色が白色に変更されます。

このように、

どれか１つのボタンだけが、

背景色が赤色になるようにしてみましょう。

実際の動きを確認（サンプルの動き）

サンプルの動きとして、

以下を参考にしてください。

課題のサンプル動作

ポイント（色をつけるためには？）

色をつけたり、消したりするには、

どうしたら良いかという点は、

「クリックした」というイベントのときに、

DOM操作として、

要素にクラスを追加する
要素からクラスを削除する

ということを行うことで、

divタグに対して、

色をつけたり、消したりすることができます。

具体的には、

マウスカーソルが当たる → 色を付けるクラスを追加
マウスカーソルが外れる → 色を付けるクラスを削除

という処理を行うことで、

今回の課題の動きを実現することができます。

この要素に対して、

クラスを追加、削除する方法に関しては、

以下を参考にしてください。

要素にクラスを追加する

要素からクラスを削除する

答え

HTML

<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample Dom/Event</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    <div class="text-pattern">
      <label>３つのボタンをクリック</label>
    </div>
    <div>
      <button id="btn-first" class="btn-pattern btn-color-active">１つ目</button>
      <button id="btn-second" class="btn-pattern btn-color-default">２つ目</button>
      <button id="btn-third" class="btn-pattern btn-color-default">３つ目</button>
    </div>
  </body>
  <script type="text/javascript" src="sample.js"></script>
</html>

CSS

.btn-pattern {
  display: inline-block;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  border-radius: 8px;
  padding: 14px 24px;
  border: 1px solid #222222;
  box-shadow 0.2s ease 0s;
  transform 0.1s ease 0s;
}

.btn-color-default:hover {
  border-color: #000000;
  background: #f7f7f7;
}

.btn-color-active {
  background: #E31C5F;
  color: #fff;
}

.btn-color-default {
  background: #fff;
  color: #222222;
}

javaScript

// １つ目のボタンの定義
let btnFirst = document.querySelector('#btn-first');

// ２つ目のボタンの定義
let btnSecond = document.querySelector('#btn-second');

// ３つ目のボタンの定義
let btnThird = document.querySelector('#btn-third');


// マウスカーソルが外れた（１つ目）
btnFirst.addEventListener('click',event => {

  // １つ目のボタンのクラス設定
  btnFirst.classList.remove('btn-color-default');
  btnFirst.classList.add('btn-color-active');

  // ２つ目のボタンのクラス設定
  btnSecond.classList.add('btn-color-default');
  btnSecond.classList.remove('btn-color-active');

  // ３つ目のボタンのクラス設定
  btnThird.classList.add('btn-color-default');
  btnThird.classList.remove('btn-color-active');
})


// マウスカーソルが外れた（２つ目）
btnSecond.addEventListener('click',event => {

  // １つ目のボタンのクラス設定
  btnFirst.classList.add('btn-color-default');
  btnFirst.classList.remove('btn-color-active');

  // ２つ目のボタンのクラス設定
  btnSecond.classList.remove('btn-color-default');
  btnSecond.classList.add('btn-color-active');

  // ３つ目のボタンのクラス設定
  btnThird.classList.add('btn-color-default');
  btnThird.classList.remove('btn-color-active');
})


// マウスカーソルが外れた（３つ目）
btnThird.addEventListener('click',event => {

  // １つ目のボタンのクラス設定
  btnFirst.classList.add('btn-color-default');
  btnFirst.classList.remove('btn-color-active');

  // ２つ目のボタンのクラス設定
  btnSecond.classList.add('btn-color-default');
  btnSecond.classList.remove('btn-color-active');

  // ３つ目のボタンのクラス設定
  btnThird.classList.remove('btn-color-default');
  btnThird.classList.add('btn-color-active');
})