Как обратиться к ParentNode без this?

Question

[Kuper132]

var closeBtn = document.getElementsByClassName('closebtn')
for (var i = 0; i < closeBtn.length; i++) {
	closeBtn[i].onclick = function() {
		var div = this.parentNode;
		div.style.opacity = '0';
		setTimeout(function() {
			div.style.display = 'none'
		},6)
	}
}

Как можно обратиться к Parentu из массива без this? Пробовал так var div = closeBtn[i].parentNode; но ошибка получается почему то.

Answer 1

[Павел Корнилов]

[].forEach.call(document.getElementsByClassName('closebtn'), function(i) {
	i.onclick = function() {
	    var div = this.parentNode;
	    div.style.opacity = '0';
	    div.style.display = 'none'
	}
})

Comments

[Kuper132]

А можно как то без this? указать масив.parentNode

[Павел Корнилов]

Kuper132, у массива нет родительского элемента. Не знаю, чем вам именно this не угодил, но можно и так:

[].forEach.call(document.getElementsByClassName('closebtn'), function(i) {
  i.onclick = function() {
      var div = i.parentNode;
      div.style.opacity = '0';
      div.style.display = 'none'
  }
})

Answer 2

[0xD34F]

Объявите счётчик цикла с помощью let вместо var - тогда closeBtn[i] будет таким, как вам надо.

Или, обращайтесь к кликнутому элементу через объект события:

for (const n of document.querySelectorAll('.closebtn')) {
  n.addEventListener('click', onClick);
}

function onClick(e) {
  const parent = e.currentTarget.parentNode;
  // ...
}

Comments

[Kuper132]

Спасибо ето я так понимаю пример замыкания получается небольшой для каждой итерации берется новый елемент?

[0xD34F]

Kuper132, да, типа того. На каждой итерации в замыкание попадает отдельный экземпляр счётчика.