イベントリスナーを追加しないでください

Question

私は初心者ですので、基本的な質問についてはごめんなさい。 ボタンを押したときに関数を呼び出すイベントリスナーを作成しました。 私はそれを働かせることができません。コードが現れたので、私は通訳者 によってaddEventListenerコード8行目が機能ではなく、私のページ上で が動作しないと言われています。何か案は？ありがとう！

function createNewList() { 

var displayNow = document.getElementById('listSectionMain'); 
displayNow.setAttribute('class', 'hideThis'); 
} 

var butt = document.getElementsByClassName('buttonMain'); 
butt.addEventListener('click', function() { 
createNewList() } 
, false); 

Answer 1

変更

var butt = document.getElementsByClassName('buttonMain')[0]; 

へのラインは、クラス名で要素を取得し、実際に配列

EDIT返します これはあなたの必要性のために動作しますが。

var butt = document.getElementsByClassName('buttonMain'); 
for(i=0;i<butt.length;i++){ 
    butt[i].addEventListener("click", createNewList); 
} 

Answer 2

getElementsByClassNameあなたはこの方法でそれを使用することができ、配列の配列のようなオブジェクトに

を返す...ここ

function createNewList() { 
    var displayNow = document.getElementById('listSectionMain'); 
    displayNow.setAttribute('class', 'hideThis'); 
} 

var butt = document.getElementsByClassName('buttonMain'); 

butt[0].addEventListener("click", myFunction); 

function myFunction() { 
    alert ("Hello World!"); 
} 

あなたはまた、HTMLスニペットが表示されるはずですJSFiddle