Uncaught TypeError: Cannot read properties of null (reading '') というエラー
解決したいこと
JavaScriptを使って動的なWebページを作成しようとしています。
classList を用いてクラス名の追加/削除をし、特定の要素を隠したり表示させたりしたいです。
同じHTML, CSS, JS ファイルを使って同様のスクリプトを動かしたら他の個所では想定通りの動作をするのですが、今触っている部分が動きません。
発生している問題・エラー
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at minutesSelected
at HTMLSelectElement.onchange
該当するソースコード
<div id="mainFam" class="before withAnime">
<div class="bgimgOn">
<p> example </p>
<div id="mainArea">
<select id="detail" class="contents" onchange="selected();">
<option> example </option>
</select>
</div>
</div>
</div>
<div id="target mainFam" class="before withAnime">
<div class="bgimgOn">
<p> example </p>
<div id="mainAreaTwo">
<select id="detailTwo" class="contents">
<option> example </option>
</select>
</div>
</div>
</div>
function selected() {
var example = document.getElementById("target");
var ON = document.getElementById("detail").selectedIndex;
switch (ON) {
case 1:
example.classList.remove('before');
example.classList.add('after');
break;
case 2:
example.classList.remove('before');
example.classList.add('after');
break;
case 3:
example.classList.remove('before');
example.classList.add('after');
break;
}
}
.before {
display: none;
}
.after {
display: block;
}
補足
上記のように、 で作成したドロップダウンリストで何かを選択したらクラスを書き換える、という命令がしたいのですが、動きません。
id="mainFam" をつけた大きなdivが２つあり、変化させたいのは下側です。
上側のdivも同様にクラスの書き換えを行うスクリプトが紐づけられており、
そちらはやりたい動きが問題なくできています。
２つのdivに対して、別々のfunctionを書いていますが、使用しているクラスが同一だからダメなのかと思い片方のクラス名を変更してみましたが、エラーは消えませんでした。
switch を使うのが悪手であれば変更して書き換えたいのですが、検索しても自分のやりたいことを実装できそうなものがうまく見当たらず困っています。
汚いコードで申し訳ありません。問題点のご指摘ご教授いただければ幸いです。
2 likes
