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

Question

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

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] = () =&gt; {


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';
   }
  });