JavaScript: событие click для одного и того же имени класса

Question

У меня есть следующий фрагмент кода. Вопрос: onclick Событие не срабатывает для второго ярлыка, который имеет тот же самый класс, что и первый. Почему это? Я искал в Интернете и нашел несколько решений, но все они находятся в 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

попробовать это

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