Почему в цикле теряется контекст?

169

11 июня 2018, 23:00

По какой-то причине теряется контекст вызова в этой части кода:

for (var i = 0; i < this.buttonClick.length; i++) {
    this.buttonClick.onclick[i] = () => {
        if (this.modalBlock.classList.contains(this.currentClass + '--active-js') == false) {
            this.modalBlock.classList.add(this.currentClass + '--active-js');
            this.body.style.overflow = 'hidden';
        }
    }
}

Данный скрипт должен уметь вызывать модальное окно при нажатии на любую кнопку, для этого я собрал все селекторы с кнопками и циклом повесил функцию при клике, почему-то перестало работать, хотя без цикла работало(Если на один элемент конкретно подвешивать). В чем может быть причина?

//Modal windows 
 
function Modal(modalBlock, buttonClick, buttonClose) { 
	this.modalBlock = document.querySelector(modalBlock); 
	this.buttonClick =  document.querySelectorAll(buttonClick); 
	this.modalClose = document.querySelector(buttonClose); 
	this.currentClass = this.modalBlock.getAttribute('class'); 
	this.body = document.querySelector('body'); 
	this.ready = this.modalBlock && this.buttonClick && this.modalClose; 
 
  	if (!this.ready) { 
  		return; 
  	} 
 
  	for (var i = 0; i < this.buttonClick.length; i++) { 
 
  		this.buttonClick.onclick[i] = () => { 
	 
			if (this.modalBlock.classList.contains(this.currentClass + '--active-js') == false) { 
				this.modalBlock.classList.add(this.currentClass + '--active-js'); 
				this.body.style.overflow = 'hidden'; 
			} 
		} 
 
  	} 
 
	this.modalClose.onclick = () => { 
 
		if (this.modalBlock.classList.contains(this.currentClass + '--active-js') == true) { 
			this.modalBlock.classList.remove(this.currentClass + '--active-js'); 
			this.body.style.overflow = 'visible'; 
		} 
	} 
 
	this.modalBlock.onclick = (event) => { 
		console.log(event); 
		var contentCurrentClass = this.currentClass; 
		if (event.target.classList.contains(contentCurrentClass + '--active-js') == true) { 
			this.modalBlock.classList.remove(contentCurrentClass + '--active-js'); 
			this.body.style.overflow = 'visible'; 
		} 
	} 
} 
 
var appModal = new Modal('.modal-wrapper', '.button', '.modal__close'); 
var videoModal = new Modal('.modal-wrapper', '.play-video', '.modal__close');

.modal { 
  width: 500px; 
  height: 300px; 
  background-color: red; 
  display: none; 
} 
 
.modal--active-js { 
  display: block; 
}

<button class="play-video">Открыть модальное окно</button> 
<div class="modal"> 
  <span class="modal__close">Закрыть</span> 
</div> 
<button class="play-video">Открыть модальное окно</button> 
<button class="play-video">Открыть модальное окно</button>

Answer 1

используйте addEventListener и ваша проблема решится

вместо .onclick[I]= надо .addEventListener('click',e=>{......})

this.buttonClick[I].addEventListener('click',e => { 
	 
			if (this.modalBlock.classList.contains(this.currentClass + '--active-js') == false) { 
				this.modalBlock.classList.add(this.currentClass + '--active-js'); 
				this.body.style.overflow = 'hidden'; 
			} 
		});