Почему возникает ошибка addEventListner is not a function?

Question

[Georg77]

При навешивании события на форму выдаёт, ошибку: "form.addEventListner is not a function".
Почему?

Вот код:

const tasks = [
    {
      _id: '5d2ca9e2e03d40b326596aa7',
      completed: true,
      body:
        'Occaecat non ea quis occaecat ad culpa amet deserunt incididunt elit fugiat pariatur. Exercitation commodo culpa in veniam proident laboris in. Excepteur cupidatat eiusmod dolor consectetur exercitation nulla aliqua veniam fugiat irure mollit. Eu dolor dolor excepteur pariatur aute do do ut pariatur consequat reprehenderit deserunt.\r\n',
      title: 'Eu ea incididunt sunt consectetur fugiat non.',
    },
    {
      _id: '5d2ca9e29c8a94095c1288e0',
      completed: false,
      body:
        'Aliquip cupidatat ex adipisicing veniam do tempor. Lorem nulla adipisicing et esse cupidatat qui deserunt in fugiat duis est qui. Est adipisicing ipsum qui cupidatat exercitation. Cupidatat aliqua deserunt id deserunt excepteur nostrud culpa eu voluptate excepteur. Cillum officia proident anim aliquip. Dolore veniam qui reprehenderit voluptate non id anim.\r\n',
      title:
        'Deserunt laborum id consectetur pariatur veniam occaecat occaecat tempor voluptate pariatur nulla reprehenderit ipsum.',
    },
    {
      _id: '5d2ca9e2e03d40b3232496aa7',
      completed: true,
      body:
        'Occaecat non ea quis occaecat ad culpa amet deserunt incididunt elit fugiat pariatur. Exercitation commodo culpa in veniam proident laboris in. Excepteur cupidatat eiusmod dolor consectetur exercitation nulla aliqua veniam fugiat irure mollit. Eu dolor dolor excepteur pariatur aute do do ut pariatur consequat reprehenderit deserunt.\r\n',
      title: 'Eu ea incididunt sunt consectetur fugiat non.',
    },
    {
      _id: '5d2ca9e29c8a94095564788e0',
      completed: false,
      body:
        'Aliquip cupidatat ex adipisicing veniam do tempor. Lorem nulla adipisicing et esse cupidatat qui deserunt in fugiat duis est qui. Est adipisicing ipsum qui cupidatat exercitation. Cupidatat aliqua deserunt id deserunt excepteur nostrud culpa eu voluptate excepteur. Cillum officia proident anim aliquip. Dolore veniam qui reprehenderit voluptate non id anim.\r\n',
      title:
        'Deserunt laborum id consectetur pariatur veniam occaecat occaecat tempor voluptate pariatur nulla reprehenderit ipsum.',
    },
  ];

  (function(arrOfTasks) {
    const objOfTasks = arrOfTasks.reduce((acc, task) => {
      acc[task._id] = task;
      return acc;
    }, {}); 
  
    const listContainer = document.querySelector('.tasks-list-section .list-group',);

    const form = document.forms['addTask'];
    const inputTitle = form.elements['title'];
    const inputBody = form.elements['body'];

    renderAllTasks(objOfTasks);
    form.addEventListner('submit', onFormSubmitHandler);//ЗДЕСЬ ВЫДАЁТ ОШИБКУ
  
    function renderAllTasks(tasksList) {
      if (!tasksList) {
        console.error('Передайте список задач!');
        return;
      }
      const fragment = document.createDocumentFragment();

      Object.values(tasksList).forEach(task => {
      const li = listItemTemplate(task);
      fragment.appendChild(li);
      });

      listContainer.appendChild(fragment);
    }

    function listItemTemplate({_id, title, body} = {}) {
      const li = document.createElement('li');
      li.classList.add('list-group-item', 'd-flex', 'align-items-center', 'flex-wrap', 'mt-2',);

      const span = document.createElement('span');
      span.textContent = title;
      span.style.fontWeight = 'bold';

      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = 'Deleтe task';
      deleteBtn.classList.add('btn', 'btn-danger', 'ml-auto', 'delete-btn');
      
      const article = document.createElement('p');
      article.textContent = body;
      article.classList.add('mt-2', 'w-100');
  
      li.appendChild(span);
      li.appendChild(deleteBtn);
      li.appendChild(article);
  
      return li;
  
    }

    function onFormSubmitHandler(e) {
        e.preventDefault();
        const titleValue = inputTitle.value;
        const bodyValue = inputBody.value;
        if (!titleValue || !bodyValue) {
          alert('Пожалуйста введите title и body');
          return;
        }
    }
  })(tasks);

Comments

[Сергей delphinpro]

3. В процессе создания вопроса пользователь Сервиса обязан:
3.8. Использовать для демонстрации фрагментов кода только специальный тег < code > или специальные демонстрационные ресурсы.

Answer 1

[Alexandroppolus]

addEventListener

Comments

[Georg77]

Это да! Синтаксическая ошибка есть! Но даже после исправления выдаёт form.addEventListеner is not a function

[Alexandroppolus]

Georg77, возьми в руки jsfiddle/codepen/etc и запили небольшой пример, где баг воспроизводится. У меня теория закончилась, пора переходить к практике.

Answer 2

[Georg77]

Да синтаксическая ошибка исправлена, но всё равно выдаёт form.addEventListеner is not a function

Comments

[WapSter]

это не форум, ответы можно комментировать. Посмотри что хранится в переменной form, наверняка там не DOM элемент.