LoginSignup
coltonOP
@coltonOP (こるとんくん)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

JavaScriptがいきなり効かない

Q&A
HTMLJavaScript

解決したいこと

hrmlとJavaScriptを使ってWebページを書いていたのですが、

formタグで囲んだ瞬間 JavaScriptが効かなくなりました
どうしてなのでしょうか？

JavaScriptが動くとき

<div class="sentaku">
          {% csrf_token %}     
          <ul class="mendantime">
              <a class="font">{{ form.mendantime.label }}</a>
              <form name="RadioForm" action="">
              {% for radio in form.mendantime|add_class:"ff" %}
                  {{ radio.tag }}
                  <label for="id_mendantime_{{ forloop.counter0 }}">{{ radio.choice_label }}</label>
              {% endfor%}
              </form>
          </ul>
          <script>
              document.querySelector('ul.mendantime')?.addEventListener('click', e => e.target.type === 'radio' && formSwitch());
          </script>
          <ul class="mendantype">
              <a class="font">{{ form.mendantype.label }}</a>
              {% for radio in form.mendantype %}
              {{ radio.tag }}
              <label for="id_mendantype_{{ forloop.counter0 }}">{{ radio.choice_label }}</label>
           {% endfor %}
           </ul>    
</div>

JavaScriptが動かないとき

<form action="{% url 'account:sakusei' %}" method="POST">
      <div class="sentaku">
          {% csrf_token %}     
          <ul class="mendantime">
              <a class="font">{{ form.mendantime.label }}</a>
              <form name="RadioForm" action="">
              {% for radio in form.mendantime|add_class:"ff" %}
                  {{ radio.tag }}
                  <label for="id_mendantime_{{ forloop.counter0 }}">{{ radio.choice_label }}</label>
              {% endfor%}
              </form>
          </ul>
          <script>
              document.querySelector('ul.mendantime')?.addEventListener('click', e => e.target.type === 'radio' && formSwitch());
          </script>
          <ul class="mendantype">
              <a class="font">{{ form.mendantype.label }}</a>
              {% for radio in form.mendantype %}
              {{ radio.tag }}
              <label for="id_mendantype_{{ forloop.counter0 }}">{{ radio.choice_label }}</label>
           {% endfor %}
           </ul>    
    </div>
</form>

JSファイル

function formSwitch() {

    //どのラジオボタンがチェックされているか。（条件分岐で使用）
    check0 = document.RadioForm.id_mendantime_0.checked;  
    check1 = document.RadioForm.id_mendantime_1.checked;  
    check2 = document.RadioForm.id_mendantime_2.checked;  

    //表のところで指定したクラスを取得しています。（表示・非表示の切替で使用）
    var sanju = document.querySelectorAll('.treeview.d');
    var sanju2 = document.querySelectorAll('.treeview.a');
    var ichi = document.querySelectorAll('.treeview.b');
    var niju = document.querySelectorAll('.treeview.c');

    //チェックされているラジオボタンにより分岐させていきます。
      //すべてにチェックがtrueなので、すべてにチェックされているときに表示したいコードを書きます。
    if (check0 == true) {
    //取得したクラスをforEachで展開して、それぞれのクラスのdisplayスタイルを指定します。
        sanju.forEach(function(elem){
            elem.style.display = "";
        });
        
        sanju2.forEach(function(elem){
            elem.style.display = "";
        });
        
        
        ichi.forEach(function(elem){
            elem.style.display = "none";
        });
        
        
        niju.forEach(function(elem){
            elem.style.display = "none";
        });
        
        
        
        
    }
    //上記と同様ですね。
    else if (check1 == true) {
        
        sanju.forEach(function(elem){
            elem.style.display = "none";
        });
        
        sanju2.forEach(function(elem){
            elem.style.display = "none";
        });
        
        ichi.forEach(function(elem){
            elem.style.display = "";
        });
        
        
        niju.forEach(function(elem){
            elem.style.display = "none";
        });
        
    }
    
    
    else if (check2 == true) {
        
        sanju.forEach(function(elem){
            elem.style.display = "none";
        });
        
        sanju2.forEach(function(elem){
            elem.style.display = "none";
        });
        
        ichi.forEach(function(elem){
            elem.style.display = "none";
        });
        
        
        niju.forEach(function(elem){
            elem.style.display = "";
        });
        
    }
    
    
}

なぜ？

0

2Answer

coltonOP
@coltonOP

解決しました!

修正後

<form name="form1" action="{% url 'account:sakusei' %}" method="POST">
      <div class="sentaku">
          {% csrf_token %}     
          <ul class="mendantime">
              <a class="font">{{ form.mendantime.label }}</a>
              
              {% for radio in form.mendantime|add_class:"ff" %}
                  {{ radio.tag }}
                  <label for="id_mendantime_{{ forloop.counter0 }}">{{ radio.choice_label }}</label>
              {% endfor%}
              
          </ul>
          <script>
              document.querySelector('ul.mendantime')?.addEventListener('click', e => e.target.type === 'radio' && formSwitch());
          </script>
          <ul class="mendantype">
              <a class="font">{{ form.mendantype.label }}</a>
              {% for radio in form.mendantype %}
              {{ radio.tag }}
              <label for="id_mendantype_{{ forloop.counter0 }}">{{ radio.choice_label }}</label>
           {% endfor %}
           </ul>    
    </div>
</form>

JSファイル

function formSwitch() {

    //どのラジオボタンがチェックされているか。（条件分岐で使用）
    check0 = document.form1.id_mendantime_0.checked;  
    check1 = document.form1.id_mendantime_1.checked;  
    check2 = document.form1.id_mendantime_2.checked;  

    //表のところで指定したクラスを取得しています。（表示・非表示の切替で使用）
    var sanju = document.querySelectorAll('.treeview.d');
    var sanju2 = document.querySelectorAll('.treeview.a');
    var ichi = document.querySelectorAll('.treeview.b');
    var niju = document.querySelectorAll('.treeview.c');

    //チェックされているラジオボタンにより分岐させていきます。
      //すべてにチェックがtrueなので、すべてにチェックされているときに表示したいコードを書きます。
    if (check0 == true) {
    //取得したクラスをforEachで展開して、それぞれのクラスのdisplayスタイルを指定します。
        sanju.forEach(function(elem){
            elem.style.display = "";
        });
        
        sanju2.forEach(function(elem){
            elem.style.display = "";
        });
        
        
        ichi.forEach(function(elem){
            elem.style.display = "none";
        });
        
        
        niju.forEach(function(elem){
            elem.style.display = "none";
        });
        
        
        
        
    }
    //上記と同様ですね。
    else if (check1 == true) {
        
        sanju.forEach(function(elem){
            elem.style.display = "none";
        });
        
        sanju2.forEach(function(elem){
            elem.style.display = "none";
        });
        
        ichi.forEach(function(elem){
            elem.style.display = "";
        });
        
        
        niju.forEach(function(elem){
            elem.style.display = "none";
        });
        
    }
    
    
    else if (check2 == true) {
        
        sanju.forEach(function(elem){
            elem.style.display = "none";
        });
        
        sanju2.forEach(function(elem){
            elem.style.display = "none";
        });
        
        ichi.forEach(function(elem){
            elem.style.display = "none";
        });
        
        
        niju.forEach(function(elem){
            elem.style.display = "";
        });
        
    }
    
    
}
1
Verclene
@Verclene

もともとdocument.RadioFormで参照していたformが,外側にformを囲んだことで参照できなくなりました.

    <form name="myform" action="">
        <input name="uihere" type="text" />
        <button type="button" onclick="alert(document.myform.uihere.value)">Click!</button><!-- OK -->
    </form>

<form>
    <form name="myform" action="">
        <input name="uihere" type="text" />
        <button type="button" onclick="alert(document.myform.uihere.value)">Click!</button> <!-- NG -->
    </form>
</form>

formにformを内包することは許可されていません.
内側のformを除去して,必要に応じて生成部も調整してください.

0

Comments

  1. @coltonOP

    Questioner
    回答ありがとうございます。　解決方法はない感じなのですね。
    大人しく諦めたいと思います。

  2. @Verclene

    >内側のformを除去して,必要に応じて生成部も調整してください.

    読めませんか？？？

  3. @coltonOP

    Questioner
    すみません　仰っている意味が分からないです。

Your answer might help someone💌

LoginSign Up

Popular Questions