ラジオボタンの選択状態に合わせてテキスト表示を変更させる（DOM変換）

おはこんばんちわ。
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というクラス名を付けています。

```html
<!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で動的に使います。

```css
/* 非表示にするためのクラス */
.hidden {
    display: none;
}
```

##3.JavaScript（js/main.js）
number-listクラスを持つdivタグの子要素に、1～9の数値を持ったdivタグを入れます。
なお、ここで作った1～9の数値を入れたdivタグにnumbersというクラスを持たせました。
これは、後で出てくる奇数・偶数判定で使います。

```javascript

// 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クラスを取り除くことで、偶数が表示できるようになります。

```javascript
// 関数：ラジオボタンのチェック状態に合わせて表示/非表示を切り替える
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を入れました。

```javascript
//ラジオボタンのチェックを変更したときに関数を発動する
const displayButton = document.getElementsByName('displayButton');
for(let i=0; i<displayButton.length; i++){
    displayButton[i].addEventListener('change', displayChange);
}
```
##4.最後に
うまくコードの説明ができていないところがあるかもしれないので、後で見直そうと思います。
もし、分かりにくいところがありましたら、ご指摘いただきますと助かります。

拙文に最後までお目通しいただき、ありがとうございました！