JavaScriptでselect要素にaddEventListenerが動作しない原因と解決方法
JavaScriptで
コード例
以下は、セレクトボックスの選択が変更されたときに「change」イベントを検知してコンソールに出力するサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<select id="selectDemo">
<option value="Java">Java</option>
<option value="Javascript">Javascript</option>
<option value="MySQL">MySQL</option>
<option value="MongoDB">MongoDB</option>
</select>
</body>
<script>
document.querySelector('#selectDemo').addEventListener('change', subjectMarks);
function subjectMarks() {
console.log(58);
}
</script>
</html>プログラムの実行方法
上記のコードを「index.html」などの任意のファイル名で保存します。次に、VS Codeエディタ上でファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。
ページを表示すると、次のようなセレクトボックス（ドロップダウンリスト）が画面に現れます。
動作確認
続いて、ドロップダウンリストから任意の値（例：Javascript）を選択してみましょう。
実行結果
値を選択すると「change」イベントが発火し、関数subjectMarks()が実行されて、コンソールに以下のように出力されます。
ポイントまとめ
- getElementById()やgetElementsByTagName()などでも取得できますが、querySelector()ならCSSセレクタの記法で直感的に要素を指定できます。
- セレクトボックスの変更を検知するには、イベントタイプとして「change」を使用します。
- スクリプトがHTMLより先に実行されると要素が存在しないため、スクリプトはの後ろに配置するか、DOMContentLoadedイベント内で実行するのが安全です。
-
JavaScriptでselect要素にaddEventListenerが動作しない原因と解決方法
JavaScriptで要素に対してaddEventListener()を直接使ってもイベントが発火しない場合があります。その主な原因は、要素の取得方法に問題があるケースです。解決策としては、querySelector()を使って要素を正しく取得し、その上でaddEventListener()を組み合わせる方法が有効です。コード例以下は、セレクトボックスの選択が変更されたときに「change」イベントを検知してコンソールに出力するサンプルコードです。<!DOCTYPE html> <html lang=ja> <head> <meta charset=U
-
JavaScriptでIDを指定して要素を削除する方法
JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, in