0

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

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>

1 ответ 1

3

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

addEvent() {
  document.getElementById(this.input).
    addEventListener('change', this.selectAll.bind(this));
},
3
  • Как всегда быстро чётко и по делу )
    – Denis640Kb
    25 мар 2020 в 22:11
  • По какой причине тогда получается, что в this.selectAll this в контексте DOM-элемета, а this в bind уже в контексте объекта?
    – E_K
    25 мар 2020 в 22:50
  • @E_K По причине того, что bind как раз для этого служит.
    – user176262
    26 мар 2020 в 0:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.