Почему возникает ошибка "Cannot read property 'forEach' of undefined"?

Question

Почему возникает ошибка

Cannot read property 'forEach' of undefined

Когда присвоение находится в методе init.

this.inputs = document.querySelectorAll('[form="deleteMany"]')

Но, если перенести присвоение в метод selectAll все работает.

window.addEventListener('load', function() {
  var selector = {
    input: null,
    inputs: null,
    selected: false,
    init(elemId) {
      this.input = elemId ? elemId : "js-select-all";
      this.inputs = document.querySelectorAll('[form="deleteMany"]');
      this.addEvent();
    },
    addEvent() {
      document.getElementById(this.input).addEventListener('change', this.selectAll);
    },
    selectAll() {
      if (!this.selected) {
        this.inputs.forEach(e => e.checked = true);
        this.selected = true;
        return;
      }

      this.inputs.forEach(e => e.checked = false);
      this.selected = false;
    }
  };

  selector.init('js-select-all');
  console.log(selector.inputs);
});

<table>
  <thead>
    <tr>
      <td><input id="js-select-all" type="checkbox"></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input form="deleteMany" type="checkbox"></td>
    </tr>
    <tr>
      <td><input form="deleteMany" type="checkbox"></td>
    </tr>
    <tr>
      <td><input form="deleteMany" type="checkbox"></td>
    </tr>
  </tbody>
</table>

Answer 1

Потому что selectAll вызывается не в контексте объекта selector, а в контексте DOM-элемента, к которому эта функция прикреплена в качестве обработчика события 'change'.

addEvent() {
  document.getElementById(this.input).
    addEventListener('change', this.selectAll.bind(this));
},

БЛОГ НА HUSL

Почему возникает ошибка "Cannot read property 'forEach' of undefined"?

Ответы (1 шт):