フロントエンジニアになるための練習問題 押すと色が変わるボタン
要素をクリックすると色が変わる、という処理を実装してみたいと思います。
課題
すでに以下のようなボタンがHTML、CSSで実装されています。
このボタンを押すと、テキストとボーダーの色をredにすることが課題です。
なお、もう一度押すと元の色に戻るようにして欲しい、とのことでした。
ただし、jqueryなどのライブラリーは今回は使用してはいけない、という制約があります。
すでに完成しているHTMLとCSSは以下です。これらを元に実装を進めます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="toggle.css">
<title>クリックすると色が変わるボタン</title>
</head>
<body>
<div id="start-button" class="my-btn">ボタン</div>
</body>
</html>.my-btn {
width: 50px;
border: 2px solid lightslategray;
text-align: center;
}前提・実装時間
- 基本的なHTML・CSSが分かっていること。
- javaScriptを使って、HTMLの要素を取得できること。
- javaScriptを使ったイベントの処理ができること。
30分から1時間程度。
実装の流れ
以下、実装の流れのヒントです。これ以外にも方法はあると思いますので一例です。
- ボタンを押した時に適用するclassをcssファイルに定義する
- javascriptで、ボタンが押されたときにclassを付与する/外すと言う処理を書く
実装例
まずは、テキストとボーダーがredになるようなclassを追加します。
.my-btn {
width: 50px;
border: solid 2px lightslategray;
text-align: center;
}
/*追加*/
.active {
color: red;
border-color: red;
}.active というclassを追加しました。
これを#start-buttonがクリックされたタイミングでadd/removeします。
javascriptの実装は以下です。
const startButtonEl = document.getElementById("start-button");
startButtonEl.addEventListener("click", () => {
if(startButtonEl.classList.contains("active")){
startButtonEl.classList.remove("active");
}else{
startButtonEl.classList.add("active");
}
});
classListについてはこちらに記載があります。classに対するいろいろな操作が行えます。
上の実装例では、押されたタイミングで.activeがすでに付与されているかをチェックし、されている場合はremove、されていない場合はaddするようにしています。
上記でも動くのですが、classList.toggle を使用するとよりシンプルにかけます。
const startButtonEl = document.getElementById("start-button");
startButtonEl.addEventListener("click", () => {
startButtonEl.classList.toggle('active');
});
classList.toggleは、引数で指定したクラスが付与されていればremove、されていない場合はaddする、と言う動作をしてくれます。