[解決済み] ".addEventListener is not a function" なぜこのエラーが発生するのでしょうか？

質問内容

".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>

解決方法は？

あなたのコードの問題は、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 ) ; 
}