JavaScriptでハイフンを含むID・クラス名の要素にイベントリスナーを追加する方法

MDNでは、addEventListener()メソッドは「指定されたイベントがターゲットに配信されるたびに呼び出される関数」と説明されています。コードを正しく動作させるには、まずそのターゲットにアクセスする必要があります。

一般的なターゲットには、Element、Document、Window、そしてイベントをサポートするあらゆるオブジェクト(XMLHttpRequestなど)が含まれます。この記事では、指定したイベントのターゲットとして要素を割り当てられるように、その要素へアクセスする方法を解説します。

JavaScriptでは、ハイフン(-)を含むID、クラス名、name属性を持つノードにイベントリスナーを追加しようとすると、エラーが発生します。JavaScriptはハイフンをマイナス記号として解釈してしまうためです。本記事では、要素名に含まれるハイフンが原因で起こるJavaScriptエラーを解決する2つの方法をご紹介します。

解決策：ハイフンが原因のJavaScriptエラーを解消するには

JavaScriptにハイフンをマイナスとして誤解釈させないためには、文字列を受け取る別の要素取得メソッドを使ってノードを選択します。

querySelector()を使う

JavaScriptのquerySelector()は、ハイフンを含む文字列を引数として受け取れます。文字列として渡すことで、JavaScriptがハイフンをマイナス記号と誤認することはありません。MDNによると、DocumentインターフェイスのquerySelector()メソッドは、指定されたセレクター(またはセレクターのグループ)に一致するドキュメント内の最初のElementを返し、一致が見つからない場合はnullを返します。

IDセレクターを使えば、特定のIDを持つ要素を選択できます。例えば、e.target.new-task-description の代わりに e.target.querySelector('#new-task-description') を使用します。

同様に、クラスセレクターを使えば、特定のクラスを持つ要素も選択可能です。例：e.target.querySelector('.new-task-description')

ノード名を変更する

推奨はされませんが、実際に機能する「ハック的な」解決策もあります。IDやクラス名のハイフンをアンダースコア(_)に置き換えるか、あるいはノードへの参照すべてからハイフンを削除してしまう方法です。例えば、e.target.new_task_description.value や e.target.newtaskdescription.value のように記述します。

どちらの方法でもエラーは解決できますが、より洗練されたアプローチであるquerySelector()の使用が推奨されます。

変数を作成する方法

筆者が試した別の解決策として、taskInputという変数を作成し、そこにノードを代入した上で、その変数をターゲットに連結するというものがありました。例:newTextInput = document.getElementById("new-task-description")。しかし、DOMでテストしたところ、期待どおりには動作しませんでした。

その他に試せるメソッド

getElementByID()メソッドを連結して試したところ(e.target.getElementByID('new-task-description')など)、JavaScriptはエラーを返しました。筆者自身が気づいていない構文エラーがあった可能性もあります。

もし構文エラーでなかったとすれば、理論的にはgetElementByClassName()メソッドの連結も同じ理由で機能しないことになります。

また、筆者は未検証ですが、対象の要素によっては以下のようなメソッドも検討する価値があります。

document.getElementsByTagName()メソッドを使えば、特定のHTMLタグを持つすべての要素を選択できます。例：

getElementsByTagName('li')

さらに、document.getElementsByName()メソッドを使えば、特定のname属性を持つすべての要素を選択できます。例：

getElementsByName('new-task')

テストと学習を通じて

筆者はFlatiron Schoolのソフトウェアエンジニアリングフレックスプログラムに在籍しており、複数のラボ課題に取り組んでいました。JavaScriptがなぜエラーを投げるのかを説明してくれる記事がどうしても見つからず、苦労した経験が、この記事を執筆するきっかけとなりました。

幸い、Flatiron Schoolにはテクニカルコーチが在籍しており、そのサポートのおかげで、エラーの原因が「JavaScriptがハイフンをマイナスとして解釈していたこと」だと特定できました。構文自体は正しかったため、コーチの助けがなければ絶対に気づけなかったでしょう。テクニカルコーチのいない環境でJavaScriptを学んでいる方々にとって、この記事が少しでも役立てば幸いです。それでは、Happy Coding!