1

При вызове метода this.bindEvent(); возникает ошибка:

Uncaught TypeError: this.button.on is not a function

На 15 строке, буду признателен за помощь если укажите на мою ошибку

js:
(function() {

    "use strict"

    let List = {
        init: function() {
            this.casheDom();
            this.bindEvent();
        },
        casheDom: function() {
            this.input = document.querySelector(".js-input");
            this.button = document.querySelector(".js-btn-add");
        },
        bindEvent: function() {
            this.button.on("click", this.addItem.bind(this));
        },
        addItem: function() {
            console.log("click test");
        }
    };

    List.init();
})();

<div class="list">
        <input type="text" class="js-input">
        <button class="js-btn-add">add</button>
        <div class="js-list-view"></div>
    </div>

html:
<div class="list">
        <input type="text" class="js-input">
        <button class="js-btn-add">add</button>
        <div class="js-list-view"></div>
    </div>

1 ответ 1

0

У DOM-элементов нет метода on, видимо, Вы думали про jQuery.

this.button.addEventListener("click", this.addItem.bind(this));

window.addEventListener("load", function(){
  List.init();
});

(function() {
  "use strict"
  let List = {
    init: function() {
      this.casheDom();
      this.bindEvent();
    },
    casheDom: function() {
      this.input = document.querySelector(".js-input");
      this.button = document.querySelector(".js-btn-add");
    },
    bindEvent: function() {
      this.button.addEventListener("click", this.addItem.bind(this));
    },
    addItem: function() {
      console.log("click test: ", this.input.value);
    }
  };

  window.addEventListener("load", function(){
    List.init();
  });
})();
<div class="list">
  <input type="text" class="js-input" value="test">
  <button class="js-btn-add"> add </button>
  <div class="js-list-view">
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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