Добавить событие onclick в элементы массива

Question

Я пытаюсь выполнить итерацию по массиву и применить событие onclick к каждому элементу. Я надеюсь, что смогу щелкнуть каждый из своих div и дать им консоль записать их значение. Прямо сейчас я зациклился на том, как применить onclick к каждому div. Я новичок в JS, поэтому я не совсем понимаю, почему я не должен делать функцию внутри цикла, как жалуется JSBin. Я возился с большим количеством различных способов сделать это, но я действительно застрял ...

JSBin

function numberTrack() { 

    var gridItems = document.getElementsByClassName("grid"); 

    for (var i = 0; i < gridItems[0].length; i ++) { 
    gridItems.onclick = function(){ 
     alert("hello"); 
    }; 
    } 
} 

numberTrack(); 

Answer 1

JSBin жалуется, потому что он хочет, чтобы вы объявить функцию вне цикла и для затем назначьте его внутри цикла for. Это более эффективно, чем то, что вы сейчас делаете, которое назначает новую анонимную функцию для каждого элемента массива. Все эти идентичные функции должны быть созданы и сохранены отдельно в памяти.

Вы можете сделать что-то вроде этого, вместо:

function alertHello() { 
    alert("hello"); 
} 

for (var i = 0; i < gridItems.length; i++) { 
    gridItems[i].onclick = alertHello; 
} 

Answer 2

Вы должны перебрать все элементы в коллекции gridItems, и внутри цикла, получить каждый элемент с помощью итератора дорожу.

function handleClick() 
{ 
    alert("hello"); 
} 
function numberTrack() { 

    var gridItems = document.getElementsByClassName("grid"); 

    for (var i = 0; i < gridItems.length; i ++) { 
     gridItems[i].onclick = handleClick; 
    } 
} 

numberTrack(); 

Если вам разрешено использовать jQuery, вы можете связать событие с такими элементами.

$(function(){ 
    $(document).on("click",".grid",function(e){ 
     var item =$(this); 
     alert(item.html()) 
    }) 
}) 

Here является рабочим jsBin образец

Answer 3

var c = document.getElementsByClassName("divs"); <--- array of divs 

for (var i = 0; i < c.length; i++) { 

    c[i].onclick = function() { 

     console.log(this.value); 

    } 

}