jsのファイルが読み込まれていない

Question

現在、「削除」ボタンを押したらconfimメソッド発動するjsファイルをコーディングしようと思っています。
1行目で、ここのページに飛んだら下記の内容の処理をする記述をしました。
3行目で削除ボタンの要素を取得し、4行目できちんと取れているか確認しました。（コンソールで確認、取得できています。）
6行目で、削除ボタンをクリックしたら下記の内容の処理をする記述をしました。
7行目で、6行目の動作ができているか確認。

すると、console.log("ok")がでない。
※コンソール一番上の「ok」は違うjsファイルのです。

そして、コンソール上に赤文字でエラー文がたくさん出ました。
元々、（
confirm.js:6 Uncaught TypeError: delBtn.addEventListener is not a function
at confirm.js:6）
のみ、初めから出ていました。

おそらく、初めから6行目のファンクションが読み込まれていないと思います。
3行目の要素は4行目でしっかりと取れていると確認済みなので、他に原因がわからないです。
手詰まり状態になりました。皆様からのアドバイスやご意見をお聞かせください！

Answer 1

3行目の要素は4行目でしっかりと取れていると確認済み

いえ、getElementsByClassNameは「Elements」と複数形となっているように、要素の集合（配列のようなもの）を返します。直接addEventListenerはできません。

1個だけ取りたいのならdocument.querySelectorを使う、複数ありうるのならfor文などで回して全てにイベントをつけるなど、構造に応じた対応が必要です。

Comments

[Hiromu94]

コメントありがとうございます。

「getElementsByClassNameは「Elements」と複数形となっているように、要素の集合（配列のようなもの）を返します。直接addEventListenerはできない」

と言う部分知らなかったです。勉強になりました！
ありがとうございます！

Answer 2

delBtnはクラスで取得していますが複数あるのでしょうか？
ひとつしかないなら
document.querySelector('.delBtn')
で指定してあげてください

Comments

[yambejp]

getElementsByClassNameで得られるHTMLCollectionやNodeListなどは
複数を取得する前提になっており、それ自体のaddEventListenerメソッドは
存在しません

[Hiromu94]

コメントありがとうございます！
delBtnの要素は複数あるので、querySelectorAll('.delBtn')で取得しました。
そして、全ての要素に処理を加えたいのでforEach文で記述し、下記の画像のようにしました。
https://gyazo.com/199ad2df069e8c52113745fc15474c22

コンソール上で確認したらエラー分などは出ておらず、おそらくできたと思いますが、この書き方は現時点で間違いはないでしょうか？

[yambejp]

例示の画像ではオブジェクトを掴んでなくないですか？
document.querySelectorAll('.delBtn').forEach(x=>{
x.addEventListener('click',()=>{
console.log('ok')
});

あとソースを画像で付ける場合は並行してテキストでもつけてください

[Hiromu94]

ご丁寧にありがとうございました！

また、次回からはテキストも付けるように気をつけます！