addEventListenerの部分に発生するエラーについて教えてください。 【質問概要】 phpの勉強で簡易的なブログのCMS機能を作っています。 投稿・編集機能は完成しており、今記事一覧から削除機能を作っているところです。 以下のエラーが発生しておりますが、原因がわからないのでご教示ください。 Uncaught TypeError: btn[i].addEventListener is not a function at entryList.php:384:16 【想定している処理】 1.テーブルで記事一覧を作成し、各記事の右端に「削除」ボタンを設置 2.削除ボタンを押すとモーダルウインドウが表示(「記事タイトル」を削除しますか?の表示) 3.モーダルウインドウ上の削除ボタンを押して削除完了 ※今回の質問は2の作成の途中段階でつまづいているものです。モーダルウインドウ表示の前にオーバーレイを作成しており、その際にエラーが生じています。 【コード】 (PHP->HTML) <div> <table> <tr> <th>記事タイトル</th> <th>削除ボタン</th> </tr> <tr> <td>タイトルです。</td> <a href="#" class="deleteEntryBtn">削除テスト</a> </tr> <!-- 以下同じtrが続く --> </table> <div class="overlay">オーバーレイ部分。最終的にはここをクリックしたらモーダルウインドウが閉じるようにする。</div> (CSS) .overlay { position: fixed; top: 0; opacity: 0; visibility: hidden; height:100vh; width: 100%; background: rgba(0,0,0,.25); z-index: 900; } .overlay.active { opacity: 1; visibility: visible; } (Javascript) <script> const btn = document.querySelectorAll('.deleteEntryBtn'); const overlay = document.querySelector('.overlay'); for(let i in btn){ btn[i].addEventListener('click', function(e) { overlay.classList.add('active'); }, false); } </script>
JavaScript