LoginSignup
@coltonOP
Q&A

JavaScriptがいきなり効かない

解決したいこと

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
2
Answer

解決しました!

修正後

<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

もともと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>

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

0
回答ありがとうございます。 解決方法はない感じなのですね。
大人しく諦めたいと思います。
>内側のformを除去して,必要に応じて生成部も調整してください.

読めませんか???
すみません 仰っている意味が分からないです。
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login