Форум

lennaganci · #1 (**permalink**) 25.07.2016, 15:41

Помогите пожалуйста, при нажатии на Див должен в консоль передаться порядковый номер его, а передается всегда максимум

<html>
<body>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<script type="text/javascript">
var items = document.querySelectorAll('.item');
for (var i = 0, max = items.length; i < max ; i++) {
var element = items[i];
element.addEventListener('click', function() {
console.log('you clicked on ' + i);
});
}
</script>
</body>
</html>

Decode · #2 (**permalink**) 25.07.2016, 15:49

lennaganci,

document.onclick = function(e) {
  if ( e.target.classList.contains('item') )
    console.log(e.target.innerText);
};

рони · #3 (**permalink**) 25.07.2016, 16:13

lennaganci,
1 вариант заменить for на [].forEach.call
2 вариант прочитать документацию

warren buffet · #4 (**permalink**) 26.07.2016, 14:37

i - это переменная и к концу цикла она принимает значение, которое и выводится по щелчку. Чтобы быстро понять как это получается, надо убрать цикл:

var i = 5;

element.addEventListener('click', function() {console.log('you clicked on ' + i);});

После щелчка выведется 5. ОК. Теперь какая-то функция ниже меняет i

i = 'I will be back';

Теперь после щелчка на том же диве (на любом) будет

I will be back

warren buffet · #5 (**permalink**) 26.07.2016, 14:43

А этот forEach.call просто копирует i в кложу (внутрь другой функции). Геморрой, просто индексируй элементы и затем в любой момент получишь его нумер:

for(var i=0, el, el=elems[i];i++)
    el.setAttribute('data-index',i);

parentOfElements.addEventListener('click',function(e){
    if(this!==e.target) /* щелкнули по самому отцу */
        console.log(e.target.getAttribute('data-index'));
});

Это же html.

Форум

Справочник

Discord чат

Курсы javascript