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
