Почему код не работает в цикле?

Question

[wiyod]

Вот так работает

const moveTo = new MoveTo()
    const trigger = document.getElementsByClassName('js-trigger')[0]

    moveTo.registerTrigger(trigger, function (target) {
      trigger.blur()
      if (target instanceof HTMLElement) {
        target.focus()
      }
    })

А вот так выбивает ошибку

Uncaught TypeError: Cannot read property 'blur' of undefined

const moveTo = new MoveTo()
    const triggers = document.getElementsByClassName('js-trigger')
    for (var i = 0; i < triggers.length; i++) {
      moveTo.registerTrigger(triggers[i], function (target) {
        triggers[i].blur()
        if (target instanceof HTMLElement) {
          target.focus()
        }
      })
    }

Также пробовал вместо triggers[i] просто i, результат такой же.
Как выполнить это в цикле и перебрать все элементы?

Answer 1

[gleendo]

const moveTo = new MoveTo();
const triggers = document.querySelectorAll(".js-trigger");

for (let trigger of triggers) {
  moveTo.registerTrigger(trigger, target => {
    trigger.blur();
    
    if (target instanceof HTMLElement) target.focus();
  });
}

Comments

[Сергей delphinpro]

Тогда уж так

const moveTo = new MoveTo();
document.querySelectorAll(".js-trigger").forEach(trigger => {
  moveTo.registerTrigger(trigger, target => {
    trigger.blur();
    
    if (target instanceof HTMLElement) target.focus();
  });
});

Если стрелочные функции заменить на обычные, то и в IE работать будет

[gleendo]

Сергей, Вот только коллекция триггеров может быть нужна еще где то, а может и нет...в общем то особой сути в данном случае не играет. А на счет стрелочных функций, ждать теперь что ли пока они появятся в IE?)

[Сергей delphinpro]

iamevg_, ну коллекция пусть будет в переменной =)
Суть в замене for..of на .forEach(), у которого поддержка шире.
Или хотя бы на простой for() заменить. Оператор let и его блочный скоуп поддерживается в IE.
Короче, с for..of перебор, в остальном зачёт =))