[javascript] classの取得

Question

js初心者です。
idの取得は分かるのですが、classの取得が分かりません。
検索していろいろと試してはいるのですが、サイト通りにならないことが多く困っています。
例えば、codepenでできているのにローカルで試しにやってみるとエラーが出てしまいます。

https://syncer.jp/javascript-reference/document-getelementsbyclassname
ここのサンプルコードを試しにローカル上でやって表示してみるとエラーが…
※.addEventListener←最初のここでエラーが出ます。

どなたか分かりやすくご教授願います。

Comments

[kei344]

書かれたHTMLをマークダウンで抜粋ではなく書いていただけませんか？

[js_donzoko3]

tkturboさんが指摘していただいた通りにheadタグ内ではなく、bodyタグの閉じタグの直前に書いたらエラーなく無事動きました。

Answer 1

当該ページのサンプルコードは、あくまでHTMLとセットで動作させるのが前提です。

指定IDが見つからないとdocument.getElementByIdはnullを返しますので、続くaddEventListenerはエラーとなります。

Comments

[js_donzoko3]

もちろんHTML含めてです。
■JS
document.getElementById("method1").addEventListener()...
■HTML
<p><a id="method1">aaa</a></p>
※サイトから抜粋

これではダメと言うことでしょうか？

[tkturbo]

to)js_donzoko3さん
javascriptはhtmlのどの位置に書いていますか？
headタグの内部で書いた場合、addEventListener実行時点でdocumentの読み込みが完了していない場合があり、その時はエラーとなります。
bodyタグの閉じタグの直前にscriptタグを記述し、そのブロックにjavascriptソースを書いてみてはどうでしょう？

[js_donzoko3]

>>tkturboさん
headタグの内部で書いていました。
教えていただいた通りbodyダグの閉じタグの直前に書いたところエラーが無くなり正常に動きました！
検索してみたところ、場所によって動きが違うのですね。
勉強になりました。ありがとうございます！