【JS】selectタグにて選択肢を再選択したらinputの入力フォーム内をリセットしたい。

実装したいこと

現状、テスト①〜⑤をselectタグにて5つ選択肢を用意し、「テスト②」と「テスト④」を選択されたら「hogehoge...」の文字とinputの入力フォームを表示し、その入力フォームに5文字を入力したらボタンを活性させるような実装しております。

そこで「テスト②」と「テスト④」を選択し、inputの入力フォームに5文字を入力した後、テスト①、③、⑤いずれかを再度選択。その後、テスト②、④を再度選択すると入力フォームに既に文字が入力された状態になっており、nextボタンが押下できない状況（一旦入力済みの文字を消して再度入力しないとボタンが活性化されない・・）となっております。

リセットボタンを用意せず、再選択されたら入力フォーム内をリセットしたいです。

試したこと

以下のように「document.getElementById("num").value = "";」を使用して、num変数の中身を空にすると実現はできましたが、他に良いやり方があればご教示いただけると幸いです。

js
1function check() {
2    let c_test = document.getElementById("test").value;
3    let next = document.getElementById("next");
4
5    console.log(c_test);
6
7    if (document.getElementById("dis")) {
8        if (c_test == "1") {
9            document.getElementById("dis").style.display = "none";
10        } else if (c_test == "2") {
11            document.getElementById("dis").style.display = "";
12        } else if (c_test == "3") {
13            document.getElementById("dis").style.display = "none";
14        } else if (c_test == "4") {
15            document.getElementById("dis").style.display = "";
16        } else if (c_test == "5") {
17            document.getElementById("dis").style.display = "none";
18        }
19    }
20
21    if (c_test === "2" || c_test === "4") {
22        checkon = false;
23    } else {
24        checkon = true;
25    }
26
27    checkset();
28document.getElementById("num").value = "";
29
30}

分かる方いらっしゃいましたらお力添えを頂きたいです。

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

該当のソースコード

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

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

回答1件

ベストアンサー

js
1    if (c_test === "2" || c_test === "4") {
2        checkon = false;

ここで、num の現在の状態を正確に反映させる必要がありますね。たとえば、

js
1    if (c_test === "2" || c_test === "4") {
2        checkon = num.value.length >= 5;

その他

js
1num.addEventListener("keyup", function () {

これだとマウスからペーストした場合に反応しません。input イベントを使いましょう。

js
1  if (checkon == true) {
2    next.className = "btn";
3  } else if (checkon == false) {
4    next.className = "btn disable";
5  }

next.classList.togle('disable', !checkon); だけでいいです。

投稿2022/08/29 02:31

int32_t

総合スコア20856

TMTN

2022/08/29 02:51

ご回答頂きありがとうございます。「num の現在の状態を正確に反映させる必要があります」とは、質問内で記載させて頂いた「document.getElementById("num").value = "";」を使用する際にあたってということでしょうか？これだとマウスからペーストした場合に反応しません。input イベントを使いましょう。 ⇨こちらに関しては、確かにペーストした際は反応しないですね。今回はパスワードで入力のみ反応で検討しているので大丈夫ですが、ペーストでも反応するような実装も頭に入れておきます。ご指摘ありがとうがございます。 next.classList.togle('disable', !checkon); だけでいいです。 ⇨こちらは、「checkon == true」と「checkon == false」でボタンの活性、非活性の表示を制御しておりましが、不要でしょうか？トグルで出し訳の方が確かにソースもスッキリしますが、、また初歩的なご質問で申し訳ございませんが、togle内の !checkonは、（checkonでなければtrue）どういう意味合いでしょうか？togleで何を指すのか大変申し訳ございませんが、分からなく、、ご教示いただけると幸いです。

int32_t

2022/08/29 02:58

> 「document.getElementById("num").value = "";」を使用する際にあたってということでしょうか？いいえ。 toggle() は https://developer.mozilla.org/ja/docs/Web/API/DOMTokenList/toggle ですが、動作は元のコードと変わらないので、「こういう書き方もあるんだな」と納得するだけでいいと思いますよ。

TMTN

2022/08/29 05:04

そういうことですね。承知しました。ご回答頂きありがとうございます。勉強になりましたmm

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