Как пофиксить создаваемый объект?

Question

[iordania]

Всем привет!
создаю следующий класс:

class Form {
  constructor({ form }) {
    this.form = document.querySelector(form);
    this.fields = this.form.querySelectorAll(fields);
    this.init(this.fields);
  }

  init(fields) {
    fields.forEach((input) => {
      input.addEventListener("input", (e) => {
        this.changeInput(e);
      });
    });
  }
}

export default Form;

далее в индексовом файле, где собираюсь подключать все модули, делаю импорт класса и создаю объект с параметрам (селектор формы):

import Form from './Form';
window.addEventListener("DOMContentLoaded", () => {
const form= new Form({
  form: ".js-form",
})
});

И проблема в том что на страницах где селектор присутствует, ошибки нет, а где нет - сыпется такая ошибка:


Понимаю, что нужно сделать проверку но как это реализовать внутри конструктора не совсем понятно.
Как пофиксить ?

Comments

[Lynn «Кофеман»]

this.form.querySelectorAll(fields);
Откуда взялся fields?

[iordania]

Алексей Тен, извините, не дописал:

class Form {
  constructor({ form, fields }) {
    this.form = document.querySelector(form);
    this.fields = this.form.querySelectorAll(fields);
    this.init(this.fields);
  }

  init(fields) {
    fields.forEach((input) => {
      input.addEventListener("input", (e) => {
        this.changeInput(e);
      });
    });
  }
}

export default Form;


const form= new Form({
  form: ".js-form-register",
  fields: ".js-form-input",
})

[Константин Б.]

iordania,

извините, не дописал:

Копипаст не работает или боишься что твое грандиозное творение украдут?

[iordania]

Константин Б., фу фу фу) вас и сюда занесло

Answer 1

[Евгений Кузнецов]

стоит сделать проверку на наличие формы в конструкторе:

constructor({ form, fields }) {
  this.form = document.querySelector(form);

  if (this.form) {
    this.fields = this.form.querySelectorAll(fields);
    this.init(this.fields);
  }
}