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

課題内容

＜概要＞
　サイズが横200px/縦200pxで、
　枠線がついたdivタグを３つ用意しましょう。
　divの順番として、
　div１つ目：赤色
　div２つ目：青色
　div３つ目：黄色
　として動きをつけます。
　動きは、マウスのカーソルの動きによって、
　divの背景色を変える動きをします。
　マウスカーソルの動きで、
　divタグにカーソルが当たる：背景色をつける
　divタグからカーソルが外れる：背景色を元に戻す
　という動きをつけましょう。
　
　実際の表示は、以降の出力結果などを、
　参考にして作ってみましょう。
　
　以降の出力結果などの参考のレイアウトに関しては、
　それぞのdivタグをわかりやすくするために、
　順番に該当する色（赤、青、緑）を、
　divタグの真ん中に表示しています。

出力結果

初期表示として、

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

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

マウスカーソルの動きによるdivタグの表示は、

以下のようになります。

マウスカーソルによるdivタグの背景色の変更

例えば、

最初の赤色に変更するdivタグにカーソルを当てたときは、

このように、

赤色用のdivタグの背景色を「赤色」に変更します。

そして、

マウスカーソルが外れると、

このように、

赤色用のdivタグの背景色が、

元の初期表示に戻ります。

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

サンプルの動きとして、

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

課題のサンプル動作

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

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

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

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

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>
      <label class="text-result">色の変更</label>
    </div>
    <div id="target-red" class="target-div">
      <span>赤色</div>
    </div>
    <div id="target-blue" class="target-div">
      <span>青色</div>
    </div>
    <div id="target-green" class="target-div">
      <span>緑色</div>
    </div>
  </body>
  <script type="text/javascript" src="sample.js"></script>
</html>

CSS

.target-div {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin: 10px 0px;
  display: flex;
  justify-content: center;
  align-items: center;

}
.target-div {
  cursor: pointer;
}
.red {
  background-color: red;
  color: white;
}
.blue {
  background-color: blue;
  color: white;
}
.green {
  background-color: green;
  color: white;
}

javaScript

// 赤色のための定義
let sampleRed = document.querySelector('#target-red');

// 青色のための定義
let sampleBlue = document.querySelector('#target-blue');

// 緑色のための定義
let sampleGreen = document.querySelector('#target-green');


// マウスカーソルが当たった（赤色）
sampleRed.addEventListener('mouseenter',event => {

  // クラウを追加
  sampleRed.classList.add('red');
})

// マウスカーソルが外れた（赤色）
sampleRed.addEventListener('mouseleave',event => {

  // クラウを削除
  sampleRed.classList.remove('red');
})

// マウスカーソルが当たった（青色）
sampleBlue.addEventListener('mouseenter',event => {

  // クラウを追加
  sampleBlue.classList.add('blue');
})

// マウスカーソルが外れた（緑色）
sampleBlue.addEventListener('mouseleave',event => {

  // クラウを削除
  sampleBlue.classList.remove('blue');
})

// マウスカーソルが当たった（緑色）
sampleGreen.addEventListener('mouseenter',event => {

  // クラウを追加
  sampleGreen.classList.add('green');
})

// マウスカーソルが外れた（緑色）
sampleGreen.addEventListener('mouseleave',event => {

  // クラウを削除
  sampleGreen.classList.remove('green');
})