発端 : 複数要素にaddEventListenerを指定しても動かない!
・getElementsByClassNameで複数個のボタンに同じイベントを指定しようとした
document.getElementsByTagName("h1")[0].style.fontSize = "2vw";
// ボタンが一つの場合
let oneBtn = document.getElementById("one_btn");
oneBtn.addEventListener("click",()=>{
alert("clickされました");
})
// ===================================
// ボタンが三つの場合(エラーはいて動かなくるのでコメントアウトです)
// let threeBtn = document.getElementsByClassName("three_btn");
// threeBtn.addEventListener("click",()=>{
// alert("clickされました");
// })
// ===================================
// ボタンが五つの場合
let fifthBtn = document.getElementsByClassName("fifth_btn");
for(let i = 0; i < fifthBtn.length; i++) {
fifthBtn[i].addEventListener("click",()=>{
alert("clickされました");
})
}
原因:addEventListenerは一つづつのノードにしか指定できなかった
1.addEventListenerを正しく理解できていなかった
2.複数の要素を取得してくる際の形式が配列であることを知らなかった
解決策:一つづつ取り出して指定すれば良い
・そもそも、配列で取得していることがわかれば様々な文法が思い浮かぶことと思います。
・上記のコードではfor文を用いていますが、結局どの文法でも良いので、原因であった
ーaddEventListenerは一つのノードにしかしか設定できない
ー複数の要素を取得してきたときは配列である
の二点を解決するように動けば、おのずと解決されるように思います。
感想:インプットとアウトプットのバランスの重要性
今回なぜこのような事でつまづいたのかというと、そもそも上記二点の原因に関する知識不足でした。
当然どの分野でも言える事ですが基礎的な部分の最低限のインプットは必要で、
アウトプットの中で問題にぶつかり、その内容をインプットするという学習法を取っていましたが、それだけでは学ぶことができない部分が出てきたり、トレンドへのアンテナが鈍っていくような気がするのでとりあえずインプットの時間を少し増やそうと思いました。