[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか？

質問内容

コードは次のとおりです。

var comment = document.getElementsByClassName("button");
function showComment() {
  var place = document.getElementById('textfield');
  var commentBox = document.createElement('textarea');
  place.appendChild(commentBox);
}
comment.addEventListener('click', showComment, false);

<input type="button" class="button" value="1">
<input type="button" class="button" value="2">
<div id="textfield">
</div>

実行すると、エラーが発生します。

.addEventListener is not a function

解決方法は？

あなたのコードの問題は、html要素が利用可能になる前にあなたのスクリプトが実行されることです。そのため var comment は空の配列です。

ですから、html要素が利用できるようになってから、スクリプトを移動させるべきです。

また getElementsByClassName は html コレクションを返すので、ある要素にイベントリスナーを追加する必要がある場合は、次のようにする必要があります。

comment[0].addEventListener('click' , showComment , false ) ; 

すべての要素にイベントリスナーを追加したい場合は、要素間をループする必要があります。

for (var i = 0 ; i < comment.length; i++) {
   comment[i].addEventListener('click' , showComment , false ) ; 
}