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

課題内容

＜概要＞
　サイズが横200px/縦200pxで、
　枠線がついたdivタグを３つ用意しましょう。
　それぞれのdivタグの下に、
　ボタンを２つ用意しましょう。　
　ボタン１つ目：「リセット」という文字のボタン。
　ボタン２つ目：「XX色に変更」という文字のボタン。
　（XXは、赤、青、緑を順番に）
　表示としては、divタグと２つのボタンがセットで、
　このセットを３つ用意する形になります。
　セットの順番として、
　セット１つ目：赤色
　セット２つ目：青色
　セット３つ目：黄色
　となります。
　実際の表示は、以降の出力結果などを、
　参考にして作ってみましょう。
　ボタンを押した時の動きは、
　「リセット」を押すと、背景は色がない状態にします。
　「XX色に変更」を押したときは、
　XXに該当する色に、divタグの背景色を変えましょう。
　
　以降の出力結果などの参考のレイアウトに関しては、
　それぞのdivタグをわかりやすくするために、
　XX色のXXに該当する色（赤、青、緑）を、
　divタグの真ん中に表示しています。

出力結果

初期表示として、

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

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

ボタンを押した時の表示の変更は、

以下のようになります。

ボタンを押した時

例えば、

赤色に変更するボタンが押されたときは、

このように、

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

そして、

この後に「リセット」ボタンが押されると、

このように、

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

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

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

サンプルの動きとして、

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

課題のサンプル動作

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

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

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

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

DOM操作として、

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

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

divタグに対して、

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

具体的には、

「XX色に変更」ボタンをクリック → 色を付けるクラスを追加
「リセット」ボタンをクリック → 色を付けるクラスを削除

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

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

この要素に対して、

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

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

要素にクラスを追加する

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

答え

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>
      <button id="action-red-reset">リセット</button>
      <button id="action-red-change">赤色に変更</button>
    </div>
    <div id="target-blue" class="target-div">
      <span>青色</div>
    </div>
    <div>
      <button id="action-blue-reset">リセット</button>
      <button id="action-blue-change">青色に変更</button>
    </div>
    <div id="target-green" class="target-div">
      <span>緑色</div>
    </div>
    <div>
      <button id="action-green-reset">リセット</button>
      <button id="action-green-change">緑色に変更</button>
    </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;

}
.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 sampleActionRedReset = document.querySelector('#action-red-reset');
let sampleActionRedChange = document.querySelector('#action-red-change');

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

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


// リセット（赤色）
sampleActionRedReset.addEventListener('click',event => {

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

// 色変更（赤色）
sampleActionRedChange.addEventListener('click',event => {

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

// リセット（青色）
sampleActionBlueReset.addEventListener('click',event => {

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

// 色変更（緑色）
sampleActionBlueChange.addEventListener('click',event => {

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

// リセット（緑色）
sampleActionGreenReset.addEventListener('click',event => {

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

// 色変更（緑色）
sampleActionGreenChange.addEventListener('click',event => {

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