【JS】selectにて選択され、更にinputタグに文字を入力されたらボタンを活性させたい

実装したいこと

タイトルにあるようにselectにて選択され、更にinputタグに文字を入力されたらボタンを活性させたいです。

現状、セレクトタグのテスト②とテスト④を選択したら、
「hogehoge...」の文字とinputの入力フォームを表示するようにしております。

その入力フォームにて5文字以上入力されるとボタンを活性させたいです。

一応現状既に実現したいことは出来ております。

            if (num.value.length === 5) {
                next.className = "btn";
            } else {
                next.className = "btn disable";
            }

しかし、理想としては「next.className = "btn";」と「next.className = "btn disable";」は使わずに、
checkonの変数を使って実現させたいです。

            if (num.value.length === 5) {
                checkon = true;
            } else {
                checkon = false;

しかし、スコープが原因なのか、コンソールで確認してもそれぞれcheckonの変数に値は代入できているのですが、実現させたいように発火してくれません。

あと一歩のところで行き詰まってしまっております。。
分かる方いらっしゃいましたらお力添えを頂きたいです。

よろしくお願い致します。

該当のソースコード

html
1<body class="center">
2  <div class="center" style="width: 500px;">
3    <select name="test" id="test" onchange="check();" style="width: 50%;">
4      <option value="" hidden selected disabled>-</option>
5      <option value="1">テスト①</option>
6      <option value="2">テスト②</option>
7      <option value="3">テスト③</option>
8      <option value="4">テスト④</option>
9      <option value="5">テスト⑤</option>
10    </select>
11    <div id="dis" style="display: none;">
12      <p class="center">hogehoge<br>hogehoge</p>
13      <div class="center">
14        <input type="text" name="num" id="num" maxlength="10">
15      </div>
16    </div>
17    <ul class="center" style="width: 100%; margin-right:40px;">
18      <li>
19        <a id="next" class="btn disable" href="#">next</a>
20      </li>
21      <li style="margin-top: 20px;">
22        <a class=" btn" href="#">back</a>
23      </li>
24    </ul>
25  </div>
26</body>

css
1.btn{
2    list-style: none;
3    padding: 5px 15px;
4    border-radius: 5px;
5    display: inline;
6    vertical-align: middle;
7    text-align: center;
8    border: 1px solid #eee;
9    color: #069;
10    background-color: #fff;
11}
12
13li{
14    list-style: none;
15}
16
17a{
18    text-decoration: none;
19}
20
21.center{
22    display: flex;
23    justify-content: center;
24    align-items: center;
25    flex-direction: column;
26}
27
28.disable{
29    cursor: default;
30    background-color: #fff;
31    color: #eee;
32    border: 1px solid #eee;
33}

js
1function check() {
2    let checkon = true;
3
4    let c_test = document.getElementById("test").value;
5    let next = document.getElementById("next");
6
7    console.log(c_test);
8
9    if (document.getElementById("dis")) {
10        if (c_test == "1") {
11            document.getElementById("dis").style.display = "none";
12        } else if (c_test == "2") {
13            document.getElementById("dis").style.display = "";
14        } else if (c_test == "3") {
15            document.getElementById("dis").style.display = "none";
16        } else if (c_test == "4") {
17            document.getElementById("dis").style.display = "";
18        } else if (c_test == "5") {
19            document.getElementById("dis").style.display = "none";
20        }
21    }
22
23    if (c_test === "2" || c_test === "4") {
24        checkon = false;
25
26        let num = document.getElementById("num")
27
28        num.addEventListener("keyup", function () {
29
30            if (num.value.length === 5) {
31                next.className = "btn";
32            } else {
33                next.className = "btn disable";
34            }
35        })
36    } else {
37        checkon = true;
38    }
39
40    if (checkon == true) {
41        next.className = "btn";
42    } else if (checkon == false) {
43        next.className = "btn disable";
44    }
45}

yambejp

2022/08/18 10:32

「ボタンを活性化」とはアンカーをクリックしてもhrefに飛ばなければいいのでしょうか？ btnはnextだけではなくbackも同様なのでしょうか？全体的にきちんと説明がされていないのでぼんやりした質問になっています

TMTN

2022/08/18 10:50

説明不足で申し訳ございません・・ nextのボタンを活性させると、選択肢によって遷移先を変えたいと考えています。またbackのボタンは遷移先が決まっているためjsはしようせずにhrefで指定を検討しています。

行動規範の内容に同意します

回答2件

ベストアンサー

思いつく限り書いておきました

https://codepen.io/riafeed/pen/YzadajN

投稿2022/08/18 10:48

RiaFeed

総合スコア2701

TMTN

2022/08/18 11:36

回答頂きありがとうございます。今外出しており試せない環境の為、明日確認させて頂きます。

行動規範の内容に同意します

入力フォームにて5文字以上入力される

でしたら、そのテキスト入力にonchange等のイベントが必要です。（確実に入力終了を感知したいならblurのほうが良いかも）
現状だとセレクトボックスのみにイベントが付与されています。

投稿2022/08/18 10:19

m.ts10806

総合スコア80850

RiaFeed

2022/08/18 10:48 編集

keyupイベントのタイミングで文字数判定をやってるみたいですよ、まぁ確かにそれでもできるっちゃできるけど・・・と思った。

TMTN

2022/08/18 10:47

なるほどですね。現状のコードだと一応実現出来ていますが、このままだと問題はあるのでしょうか？ if (num.value.length === 5) { next.className = "btn"; } else { next.className = "btn disable"; } 色々と今も試してみてますが、どのように付与させればよろしいのでしょうか・・・

m.ts10806

2022/08/18 10:54

失礼。 addEventListener見落としてました。ただ、書きっぷりは統一されたほうが良いと思います。イベントの管理が煩雑になります。個人的には両方addEventListenerにしたうえで、「セレクトボックスの現在値」をテキスト入力に挟んだほうがコードもスッキリすると思います。ひとまず懸念されてるスコープの問題は残り続けるので、グローバルに置いといたほうが良さそうですけどね。

m.ts10806

2022/08/18 10:56

あとイベントって常に追加だった記憶。現状だとaddされ続けて想定しない動作をする可能性もあります。今の形を維持したいならaddのelseでremoveを。

TMTN

2022/08/19 01:00

お返事が遅くなり大変申し訳ございません。 blur等は結局不要なのでしょうか？ご回答頂いた内容で色々試したりしているのですが、グローバルに変数をおいたりしても課題部分の解決ができなく。。。

行動規範の内容に同意します

あなたの回答