JavaScriptを使ってカウンターの条件分岐を実装し、表示されている数字に応じて文字色を変更する方法について解説します。具体的には、カウンターの値が10の倍数の場合は赤、5の倍数の場合は青、それ以外は黒に変更し、さらに「Good」ボタンでカウンターが5、10、15の倍数に達した際に文字が大きくなるようにします。
条件分岐の基本
条件分岐を行うためには、`if`文を使用して特定の条件をチェックし、その結果に基づいて処理を分けることが基本です。JavaScriptでは、`if`文を使用してカウンターの値が特定の条件（例えば、10の倍数や5の倍数）に一致するかどうかを確認します。
以下に示すコードは、カウンターの値をチェックし、条件に応じて文字色を変更する基本的な構文です。
if (counter % 10 === 0) {
// 10の倍数の場合の処理
} else if (counter % 5 === 0) {
// 5の倍数の場合の処理
} else {
// その他の場合の処理
}カウンターの値を取得して条件分岐を行う
カウンターの値をHTMLから取得し、その値が10の倍数、5の倍数、それ以外の場合に応じて文字色を変更するには、次のようにコードを記述します。
let counter = 0;
const countDisplay = document.querySelector('.count');
document.querySelector('.btn-good').addEventListener('click', function() {
counter++;
countDisplay.textContent = counter;
if (counter % 10 === 0) {
countDisplay.style.color = 'red';
} else if (counter % 5 === 0) {
countDisplay.style.color = 'blue';
} else {
countDisplay.style.color = 'black';
}
});このコードは、Goodボタンをクリックするたびにカウンターの値が増加し、その値が10の倍数または5の倍数であるかどうかを判定して、文字色を変更します。
文字の大きさを変更する
さらに、カウンターが5、10、15の倍数に達した際に文字サイズを大きくするためには、次のようなCSSの変更を加えます。
if (counter === 5 || counter === 10 || counter === 15) {
countDisplay.style.fontSize = '2em';
} else {
countDisplay.style.fontSize = '1em';
}このコードにより、カウンターの値が5、10、15の場合に文字の大きさが2倍になります。それ以外の場合は、文字サイズは通常の大きさ（`1em`）に戻ります。
Badボタンの動作と改善点
質問にあった「Bad」ボタンについては、クリック時にカウンターが減少する処理を追加することが考えられます。例えば、次のようにコードを変更します。
document.querySelector('.btn-bad').addEventListener('click', function() {
counter--;
countDisplay.textContent = counter;
countDisplay.style.color = 'black';
});このように、Badボタンをクリックした際にカウンターが減少し、文字色が黒に戻るように設定できます。
まとめ
JavaScriptを使ってカウンターの値に応じた文字色の変更や文字サイズの調整を行う方法について解説しました。`if`文を使って条件分岐を行い、特定の条件に合わせてスタイルを変更することで、動的なUIを実現できます。カウンターの値が5、10、15の倍数に達した際に文字サイズを大きくするための処理も簡単に追加でき、よりインタラクティブなフォームを作成することができます。
コメント