今の自分の理解が浅いため、再度同じミスを犯すかもしれない。
その時に見返して確認ができるように記録として残しておく。
経緯
railsで削除機能実装中、削除を行う前に確認ダイアログを表示させたいと思い、Javascriptファイルに記述を行う。
html.erb
<%= link_to '削除', hoge_path(hoge.id), class: 'delete-btn', method: :delete %>
javascript
function check() {
const btn = document.getElementsByClassName('delete-btn');
btn.addEventListener('click', () => {
window.confirm('削除を実行します')
})
};
削除ボタンをクリックしてみるがダイアログが表示されることはなく、削除が実行される。リロードして再チャレンジするがやはり何もなく削除される。
結論
htmlファイルの記述を以下のように変更
html.erb
<%= link_to '削除', hoge_path(hoge.id), class: 'delete-btn', method: :delete, data: { confirm: '削除を実行します。よろしければOKをクリックしてください。' } %>
調べたところdata: { confirm: "表示させる言葉" }をlink_toに記述すればダイアログが表示されるとのこと。ダイアログの表示に関しては解決。
本題
では、もしJavaScriptファイルでaddEventListenerを使いたい時はどうすればいいか。
- 取得する要素が１つだけならばidを付与して
getElementByIdで取得する。 -
querySelectorAllで要素を取得→取得した要素に対してforEach関数を用いる
foreach関数はNodeListオブジェクトのメソッドであり、NodeListはquerySelectorAllの戻り値である。そのため、getElementsByClassNameではなくquerySelectorAllを利用して要素を取得する。
ちなみにgetElementsByClassNameの戻り値はHTMLCollection。
感想
まだまだ理解が浅く、とりあえず調べたことを繋げて書いているため、自分でも理解できていない部分が多い。
もっと理解を深めていけるよう勉強していかねばと感じた。