В IE 11 не работает JS обработчик события

169

25 января 2018, 20:36

Есть код:

var menuItem = document.querySelectorAll('.menu-item-has-children');
var subMenu = document.querySelectorAll('.sub-menu');
for (let i = 0; i < menuItem.length; i++) {
  menuItem[i].classList.add('off-arrow');
  menuItem[i].addEventListener('mouseover', function () {
    subMenu[i].style.display = 'block';
    this.classList.add('on-arrow');
    this.classList.remove('off-arrow');
  });
  menuItem[i].addEventListener('mouseout', function () {
    subMenu[i].style.display = 'none';
    this.classList.remove('on-arrow');
    this.classList.add('off-arrow');
  });
}

Вкратце говоря этот код просто поворачивает треугольную стрелку при наведении мыши и убирает при отведении. Не могу понять почему не работает в IE 11. При наведение в IE в консоль выводится ошибка "SCRIPT5007: Не удалось получить свойство "style" ссылки, значение которой не определено или является NULL"

Ссылка на сам ресурс.

Answer 1

В IE 11 let некорректно работает внутри цикла, привязывая переменную к общему LexicalEnvironment цикла вместо LexicalEnvironment внутреннего блока. Фактически, он работает как var.

Попробуйте другое решение из этого ответа: Почему асинхронная функция внутри цикла выполняет последнюю итерацию много раз?

Answer 2

Решил проблему путем присвоения в новую переменную итерацию цикла.

let hasItem = menuItem[i];

let toggleMenu = subMenu[i];

for (let i = 0; i < menuItem.length; i++) {
  let hasItem = menuItem[i];
  let toggleMenu = subMenu[i];
  hasItem.classList.add('off-arrow');
  hasItem.addEventListener('mouseover', function () {
    toggleMenu.style.display = 'block';
    this.classList.add('on-arrow');
    this.classList.remove('off-arrow');
  });
  hasItem.addEventListener('mouseout', function () {
    toggleMenu.style.display = 'none';
    this.classList.remove('on-arrow');
    this.classList.add('off-arrow');
  });
}