addEventListener не работает внутри функции - PullRequest
Новая
       17

addEventListener не работает внутри функции

1 голос
/ 03 марта 2020

Я пытаюсь сгенерировать форму на основе этих настроек ... 

let formItems = new Form("form-items", {
        items: [
            { id: "companyName" },
            { id: "documentKey" },
            { id: "documentDate" }
        ],
    });

Внутри я генерирую каждый вход и пытаюсь добавить eventListener, но он не работает. Что я делаю не так? 

module.exports = function Form(formElementId, options) {

    this.state = {}

    options.items.map(item => {
        renderInput(item.id);
        this.state[item.id] = ""
    })

    function renderInput(id) {

        let html = `<input id="${id}" />`

        document.getElementById(formElementId).innerHTML += html;

        document.getElementById(id).addEventListener("input", (e) => {
            console.log(e);                      // <--------- Doesn't work
            this.state[id] = e.target.value;     // <--------- Doesn't work
            console.log(this.state);             // <--------- Doesn't work
        })
    }
}

1 Ответ

3 голосов
/ 03 марта 2020

Вместо того, чтобы использовать переменную в качестве литерала шаблона, вы можете просто динамически создать элемент ввода HTML и присоединить к нему событие, а также вместо добавления HTML к использованию +=, только что добавленного к контейнеру

Я бы использовал этот фрагмент вместо: 

module.exports = function Form(formElementId, options) {
  this.state = {};
  self = this;
  options.items.map(item => {
    renderInput(item.id);
    this.state[item.id] = "";
  });

  function renderInput(id) {
    let input = document.createElement("input");
    input.setAttribute("id", id);

    document.getElementById(formElementId).append(input);

    input.addEventListener("input", e => {
      self.state[id] = e.target.value;
    });
  }
};
...