Go to Qiita Advent Calendar 2024 Top
LoginSignup
ikon0518
@ikon0518 (o mi)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

フォームの表示を変更できない

Q&A

Closed

JavaScript

解決したいこと

フォームの表示を変更したい

フォームの表示が切り替わるようjavascriptを使って実装してみました。
ボタンは個人と法人の2つです。
法人のボタンを押して、もう一度個人のボタンを押しても表示が法人のままになってしまいます。
何度押しても切り替えできる方法を教えていただけますでしょうか？

0

1Answer

blue32a
@blue32a

記載のコードを簡略化して、ラジオボタンの状態をコンソールに表示するようにしました。
これで「表示が法人のままになってしまう」原因がわかると思います。

<main>
    <h1>振込情報設定</h1>
    <div id="individual">
        <form>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="maker" value="個人" onclick="formSwitch()"
                    checked>
                <label class="form-check-label"> 個人1</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="maker" value="法人" onclick="formSwitch()">
                <label class="form-check-label"> 法人1</label>
            </div>
        </form>
    </div>
    <div id="corporation">
        <form>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="maker" value="個人" onclick="formSwitch()">
                <label class="form-check-label"> 個人2</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="maker" value="法人" onclick="formSwitch()" checked>
                <label class="form-check-label"> 法人2</label>
            </div>
        </form>
    </div>
</main>

function formSwitch() {
  maker = document.getElementsByName('maker');
  console.log('個人1', maker[0].checked);
  console.log('法人1', maker[1].checked);
  console.log('個人2', maker[2].checked);
  console.log('法人2', maker[3].checked);
  if (maker[0].checked) {
    // 個人が選択されたら下記を実行します
    console.log('個人1が選択されています。');
    document.getElementById('individual').style.display = "";
    document.getElementById('corporation').style.display = "none";
  } else if (maker[1].checked) {
      // 好きな場所が選択されたら下記を実行します
    console.log('法人1が選択されています。');
    document.getElementById('individual').style.display = "none";
    document.getElementById('corporation').style.display = "";
  }
}
window.addEventListener('load', formSwitch());
1Like

Comments

  1. @ikon0518

    Questioner

    質問に答えていただきありがとうございます。
    コンソールを確認したらcheckedが見つからないと出てきました！

    ```
    function formSwitch() {
    maker = document.getElementsByName('maker');
    console.log('個人1', maker[0].checked);
    console.log('法人1', maker[1].checked);
    console.log('個人2', maker[2].checked);
    console.log('法人2', maker[3].checked);
    if (maker[0].checked) {
    // 個人が選択されたら下記を実行します
    console.log('個人1が選択されています。');
    document.getElementById('individual').style.display = "";
    document.getElementById('corporation').style.display = "none";
    } else if (maker[1].checked) {
    // 法人が選択されたら下記を実行します
    console.log('法人1が選択されています。');
    document.getElementById('individual').style.display = "none";
    document.getElementById('corporation').style.display = "";
    }

    else if (maker[2].checked) {
    // 法人が選択されたら下記を実行します
    console.log('法人1が選択されています。');
    document.getElementById('individual').style.display = "";
    document.getElementById('corporation').style.display = "none";
    }

    else if (maker[3].checked) {
    // 法人が選択されたら下記を実行します
    console.log('法人1が選択されています。');
    document.getElementById('individual').style.display = "none";
    document.getElementById('corporation').style.display = "";
    }
    }
    window.addEventListener('load', formSwitch());
    ```

    このように試しましたが駄目でした…

  2. @blue32a

    > コンソールを確認したらcheckedが見つからないと出てきました！
    これだけでは分からないですね・・・。
    こちらで動かしたところ問題なさそうなので、別ところを変更されたのか、あるいはキャッシュが原因なのかもしれません。

    > 法人のボタンを押して、もう一度個人のボタンを押しても表示が法人のままになってしまいます。

    こちらの解説ですが、個人・法人のラジオボタンがそれぞれ２つある状態で片方のチェックしかしていないのが原因です。
    一度法人にすると下のラジオボタンが表示されますが、こちらを操作してもチェックしているのは上のラジオボタンなので、表示は法人のままから変わりません。

  3. @ikon0518

    Questioner

    ›　キャッシュが原因なのかもしれません。
    こちらはキャッシュクリアで解決できました！ありがとうございます！

    ›　個人・法人のラジオボタンがそれぞれ２つある状態で片方のチェックしかしていないのが原因です。
    こちらも理解できました！
    そのうえで昨日コメントで返信したコードで試したのですが、
    個人２を押してもコンソールでは

    個人1 false
    法人1 true
    個人2 true
    法人2 false
    法人1が選択されています。

    このように表示され、解決できませんでした。
    どこが間違っているのでしょうか？😢
    ご教授お願いします…

  4. @blue32a

    プログラムは順番に実行されるからです。
    if～elseifは順番に条件式をチェックするので、２番目の法人1の条件`maker[1].checked`が真となり、その処理が実行されます。その後の条件は評価されません。

    ```
    if (false) {
    // falseなので実行されません
    } else if (true) {
    // 実行されます
    } else if (true) {
    // 条件は真ですが、手前の条件が先に真となるので、実行されません
    }
    ```

    これを考慮して条件式を作る必要があるのですが、そもそもラジオボタンは２つずつ必要なのでしょうか？

  5. @ikon0518

    Questioner

    なるほど！だからtrueとfalseがバラバラになって実行されないのですね！

    確かに、ボタン2つずつは必要ない気がしますが、どうやったら一つづつとして扱えるのかが分かりません...

  6. @blue32a

    表示切り替えの外に出せばいいのではないでしょうか。

    ```html
    <main>
    <h1>振込情報設定</h1>
    <div class="form-check">
    <input class="form-check-input" type="radio" name="maker" value="個人" onclick="formSwitch()"
    checked>
    <label class="form-check-label"> 個人1</label>
    </div>
    <div class="form-check">
    <input class="form-check-input" type="radio" name="maker" value="法人" onclick="formSwitch()">
    <label class="form-check-label"> 法人1</label>
    </div>
    <div id="individual">
    <!-- 個人 -->
    </div>
    <div id="corporation">
    <!-- 法人 -->
    </div>
    </main>
    ```

  7. @ikon0518

    Questioner

    今思いついて外側に出すことで切り替えできるようになりました！！
    本当にいありがとうございます！！

    何度も教えていただいて申し訳ないのですが、もう一つ聞きたいことがあります。
    個人の方にcheckedをつけているのですが、最初はスクロールすると法人のフォームもでてきてしまいますが、どのように直したら良いでしょうか…？

Your answer might help someone💌

LoginSign Up