JavaScript でハイフンでつながれた名前を持つ要素にイベント リスナーをアタッチする方法

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

一般的なターゲットは、要素、ドキュメント、ウィンドウ、およびイベントをサポートするオブジェクト (XMLHttpRequest など) です。この記事では、要素にアクセスして、指定されたイベントのターゲットとして要素を割り当てることができます。

特定の要素 ID、クラス、またはダッシュ付きの名前を持つノードにイベント リスナーを追加しようとすると、JavaScript はエラーをスローします。 JavaScript はダッシュ ( – ) を嫌います。ダッシュはマイナスとして認識されます。この記事では、要素名のダッシュ ( – ) が原因で発生する JavaScript エラーを解決する 2 つの解決策を紹介します。

解決済み:ダッシュによって引き起こされる JavaScript エラーを解決する方法

JavaScript がダッシュをマイナスとして認識しないようにするには、文字列を受け取るノードを選択する別の方法を使用します。

querySelector() を使用する

JavaScript では、querySelector() はダッシュを含むことができる文字列を受け取ります。文字列化により、JavaScript はダッシュをマイナスとして認識しなくなります。 MDN によると、Document メソッド querySelector() は、指定されたセレクターまたはセレクターのグループに一致するドキュメント内の最初の要素を返します。一致するものが見つからない場合は、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`。

2 つの解決策のいずれかで JavaScript エラーが修正されます。ただし、querySelector を使用する方がより洗練されているため、推奨される解決策です。 

変数の作成

私が検討した別の解決策には、taskInput という変数を作成し、その変数にノードを割り当て、次に変数 taskInput をターゲットにチェーンすることが含まれていました。 newTextInput =document.getElementById(“new-task-description”) ですが、DOM でテストしたときに JavaScript が期待どおりに動作しませんでした。

試してみたいその他の方法

getElementByID() メソッドをチェーンしようとしたとき、たとえばe.target.getElementByID(‘new-task-description’)、JavaScript がエラーをスローしました。おそらく、構文エラーがあったのですが、捕捉できなかったのでしょう。

構文エラーがなかった場合、理論的には getElementByClassName() メソッドのチェーンも機能しないことになります。

私が試していない他の方法もありますので、要素に応じてチェックしてみてください。

次のように、 document.getElementsByTagName() メソッドを使用して、特定の HTML タグのすべての要素を選択できます。

getElementsByTagName('li')

また、次のように document.getElementsByName() メソッドを使用して、特定の name 属性を持つすべての要素を選択できます。

getElementsByName('新しいタスク')

テストと学習

私は Flatiron School ソフトウェア エンジニアリング フレックス プログラムに登録しており、いくつかのラボで働いています。私がこれを書こうと思ったのは、JavaScript がエラーをスローする理由を特定するのに役立つ記事が見つからなかったからです。 

ありがたいことに、Flatiron School にはテクニカル コーチがおり、JavaScript がダッシュをマイナスとして解釈することがエラーの原因であることを特定するのに協力してくれました。私の構文は正しかったので、彼らの助けがなければ決して推測できなかったでしょう。テクニカル コーチにアクセスできない JavaScript を学習している人にとって、この記事が役立つことを願っています。コーディングを楽しんでください!