課題内容
- ＜概要＞
- サイズが横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');
})