JavaScript：同じクラス名のイベントをクリック

Question

次のコードスニペットがあります。問題はonclickイベントは最初のラベルと同じクラスを持つ2番目のラベルでは発生しません。何故ですか？ 私はオンラインで検索し、複数のソリューションを見つけましたが、すべてがjQueryにあります。しかし、私は純粋なJavaScriptでそれをしたい。誰が私はここで間違って何を知っていますか？

var label = document.getElementsByClassName('text'); 
 
label[0].onclick = function() { 
 
\t console.log(true); 
 
};

<label class="text">Hello</label> 
 
<label class="text">World!</label>

PS：私は知っている、この質問は、ここで何回も頼まれました（しかし、解決策はjQueryのためのものです）。だから、重複としてこの質問をマークしないでください：/

Answer 1

labelクラスtextを持つすべての要素の配列であるので、label[0]は、文書内の最初の要素に適用されます。それを行うための最も簡単な方法は、おそらく、このような

for (var i = 0; i<label.length; i++){ 
    label[i].onclick = function() { 
     console.log(true); 
}; 

Answer 2

var label = document.getElementsByClassName('text'); 
for (var i = 0; i<label.length; i++) { 
    label[i].oncllick = function() { console.log(true); }; 
} 

Answer 3

あなたはevent delegationを使用できます。イベントの代表団の新しいラベルに

document.body.onclick = function (ev) { 
 
    if (ev.target.getAttribute("class") == "text") { 
 
    console.log(true); 
 
    } 
 
};

<label class="text">Hello</label> 
 
<label class="text">World!</label>

おかげでもクリック可能です：

var nLabels = 2; 
 

 
document.body.onclick = function (ev) { 
 
    var newLabel; 
 
    if (ev.target.getAttribute("class") == "text") { 
 
    console.log(ev.target.textContent); 
 
    } else if (ev.target.id == "btn-add-label") { 
 
    newLabel = document.createElement("label"); 
 
    newLabel.setAttribute("class", "text"); 
 
    newLabel.textContent = " new label #" + (nLabels++); 
 
    document.body.appendChild(newLabel); 
 
    } 
 
};

<button type="button" id="btn-add-label">Add label</button> 
 
<label class="text">Hello</label> 
 
<label class="text">World!</label>

Answer 4

としてループとなり `getElementsByClassName`は、ノードの配列（コレクション）を返して、あなただけに関数を適用している。この

var label = document.getElementsByClassName('text'); 
for (var i = 0; i < label.length; i++) { 
    label[i].onclick = function() { 
     console.log(true); 
    }; 
}