おはこんばんちわ。
DOMビギナーのオジサンです。
現在、JavaScriptでミニアプリを作成しています。
そのアプリでは、ラジオボタンの選択状態により、テキストが表示されたり、非表示になる機能があります。
今回は、1～9までの数字を、ラジオボタンで選んだ属性（奇数・偶数）で表示させるコードを作ってみました！
##1.HTML（index.html）
まずはinputタグで3つのラジオボタンを作りました。
「すべて」は、1～9までの数字を表示させます。
「奇数」は1～9までの奇数を、「偶数」は1～9までの偶数を表示させます。
なお、プログラムの起動時には「すべて」で表示させたいのでchecked属性を入れました。
またラジオボタンを排他的にしたいので、name属性も入れています。
本当はこのあたりもDOMでやりたかったのですが、JavaScriptがメチャクチャ長くなりそうなのでやめました（笑）
scriptタグの前のdivタグは、JavaScriptで1～9の数字を表示させるハコになります。
DOMで入れられるよう、number-listというクラス名を付けています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ラジオボタンによる表示切り替え</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<p>状態を選んでください</p>
<input type="radio" name="displayButton" checked="checked">すべて
<input type="radio" name="displayButton">奇数
<input type="radio" name="displayButton">偶数
<div class="number-list"></div> <!-- 1～9の数値をjsで出力させる -->
<script src="js/main.js"></script>
</body>
</html>
##2.CSS（css/styles.css）
ラジオボタンが「偶数」をチェックしているときは奇数を非表示に、「奇数」をチェックしているときは偶数を非表示にします。
そのため、テキストを非表示にするhiddenクラスを用意しました。
こちらはJavaScriptで動的に使います。
/* 非表示にするためのクラス */
.hidden {
display: none;
}
##3.JavaScript（js/main.js）
number-listクラスを持つdivタグの子要素に、1～9の数値を持ったdivタグを入れます。
なお、ここで作った1～9の数値を入れたdivタグにnumbersというクラスを持たせました。
これは、後で出てくる奇数・偶数判定で使います。
// number-listクラスの子要素に、1～9の数値を入れて出力する
const numberList = document.getElementsByClassName('number-list')[0];
for (let i=1; i<10; i++) {
const div = document.createElement('div');
div.classList.add('numbers');
div.textContent = i;
numberList.appendChild(div);
}
次にラジオボタンのチェック状態に合わせて、1～9までの奇数や偶数を表示させる関数を作りました。
奇数を選ぶと、偶数を持っているdivタグにhiddenクラスを付けて非表示にするといった方法です。
なお、どのボタンを選んでも、先にhiddenクラスをremoveする命令を入れています。
例えば、奇数のあとに偶数を選んだ時、それまで非表示だった偶数を表示させる必要があります。
hiddenクラスを取り除くことで、偶数が表示できるようになります。
// 関数：ラジオボタンのチェック状態に合わせて表示/非表示を切り替える
function displayChange() {
//ラジオボタンのチェック状態を定数に入れる
const allCK = document.querySelectorAll('input[type="radio"]')[0];
const oddCK = document.querySelectorAll('input[type="radio"]')[1];
if(allCK.checked == true) {
//ラジオボタンが「すべて」をチェックしている時は、hiddenクラスを取る
for (let i=1; i<10; i++) {
const number = document.getElementsByClassName('numbers')[i-1];
number.classList.remove('hidden');
}
} else if(oddCK.checked == true) {
//ラジオボタンが「奇数」をチェックしている時は、偶数にhiddenクラスを付ける
for (let i=1; i<10; i++) {
const number = document.getElementsByClassName('numbers')[i-1];
number.classList.remove('hidden');
if(i % 2 === 0) {
number.classList.add('hidden');
}
}
} else {
//ラジオボタンが「偶数」をチェックしている時は、奇数にhiddenクラスを付ける
for (let i=1; i<10; i++) {
const number = document.getElementsByClassName('numbers')[i-1];
number.classList.remove('hidden');
if(i % 2 !== 0) {
number.classList.add('hidden');
}
}
}
}
最後にラジオボタンのチェックが変更されたら、前述の関数が発動されるよう、addEventListenerを入れました。
//ラジオボタンのチェックを変更したときに関数を発動する
const displayButton = document.getElementsByName('displayButton');
for(let i=0; i<displayButton.length; i++){
displayButton[i].addEventListener('change', displayChange);
}
##4.最後に
うまくコードの説明ができていないところがあるかもしれないので、後で見直そうと思います。
もし、分かりにくいところがありましたら、ご指摘いただきますと助かります。
拙文に最後までお目通しいただき、ありがとうございました！