Где ошибка в счетчике?

Question

[Artem Petrenko]

Получаю коллекцию параграфов. Хочу, чтобы по клику по любому, число внутри увеличивалось на один.

Когда прописываю номер параграфа вручную (фрагмент в комментарии) - все работатает. При попытке написать цикл, чтобы число увеличивалось именно в параграфе, по которому кликнул, не работает.

Скорее всего ошибка детская, но глаз замылен и не вижу. Буду благодарен за помощь.

var byTag =  document.getElementsByTagName('p');

	for (var c = 0; c<byTag.length; c++) {
		byTag[c].onclick = function func () {
			 byTag[c].innerHTML = ++counter;
		}
	}
	// byTag[0].onclick = function func () {
	// 	 byTag[0].innerHTML = ++counter;
	// }

Answer 1

[Николай Лапшин]

for (var c = 0; c<byTag.length; c++) {
    byTag[c].onclick = function func () {
       byTag[c].innerHTML = ++counter;
    }
  }

Внутри func() переменная "c" судя по всему undefined;

Проверьте.
Перед byTag[c].innerHTML = ++counter;
напишите console.log(c);
И гляньте в консоль - что выводит.

Comments

[Artem Petrenko]

Выводится поочередно 0, 1, 2, 3, 4 как и следует)

[Николай Лапшин]

А надежда была... :)

Answer 2

[tsarevfs]

Посмотрите конец статьи.

var byTag =  document.getElementsByTagName('p');
var counter = 0

for (var c = 0; c < byTag.length; c++) {
   byTag[c].onclick = (function (num) {
      return function() {
         byTag[num].innerHTML = ++counter;
      }
   })(c)

Суть в том, что переменная "c" глобальная и захватывается как ссылка. То есть когда вызывается onclic ее значение == byTag.length а не то, какое было в момент добавления колбека.

Comments

[Artem Petrenko]

Спасибо! Но вашем случае, если я дощелкал по одному параграфу до 10 и перескочу на другой - то по первому же клику появится 11. Я пытался сделать несколько независимых :(

[tsarevfs]

Artem Petrenko: Это отдельная проблема. Сделайте массив counter-ов. Или читайте текущее значение inerHTML и увеличивайте.

[tsarevfs]

byTag[num].innerHTML = parseInt(byTag[num].innerHTML) + 1 например.

Answer 3

[keslo]

Просто повесьте обработчик на все. Либо вешайте обработчик на body и ловите "делегирование событий". В нем просто проверяете, например, на e.target.className и уже изменяете его содержимое через e.target.innerHTML.