Слушатель событий не запускается?

Question

Я пытаюсь поместить элементы массива, собранные из входных данных, в таблицу HTML.Слушатель событий по какой-то причине не запускается, вот HTML.

        <form id="frm1">
      <input id='keyword-input' type="text" placeholder="Keywords"></input>
      <input id="color-input" type="text" placeholder="Color"></input>
      <input id="size-input" type="text" placeholder="Size"></input>
      <input id="profile-input" type="text" placeholder="Profile"></input>
      <input id="proxy-input" type="text" placeholder="Proxy"></input>
      <input id="category-input" type="text" placeholder="Category"></input>
      <input id="tasks-input" type="number" placeholder="# Of Tasks"></input>
      <input id="schedule-input" type="time" placeholder="Schedule Task"></input>
      <input id="search-input" type="text" placeholder="Search Method"></input>
      <button type="submit" form="frm1" class="add-button" id='addTask'>Add Task</button>
    </form>

Я пытался переместить слушателя дальше по сценарию, и я пытался встроить его в функцию загрузки, но ни одна из них не решилапроблема.

var submitButton = document.getElementById('addTask');


submitButton.addEventListener('submit', displayTable);


let taskModel = [{
    taskKeyword : value,
    taskSize : value,
    taskProfile : value
}];


function displayTable(taskModel) {
    var table = document.getElementById('taskTable');

    for (var i = 0; i < taskModel.length; ++i) {
      var tasks = tasks[i];

      var row = document.createElement('tr');

      var properties = ['taskKeyword', 'taskSize', 'taskProfile'];

      for (var j = 0; j < properties.length; ++j) {

        var cell = document.createElement('td');


        cell.innerHTML = taskModel[properties[j]];


        row.appendChild(cell);
      }

      table.appendChild(row);
    }
  }

Я ожидал, что функция будет выполнена после нажатия кнопки addTask, но она не отображается в слушателе событий dev tools.

Answer 1

Вы должны добавить слушателя к вашему form вместо button.

Из официальных документов :

submit событие вызывается при отправке формы.

Обратите внимание, что отправка запускается только для элемента формы, а не для кнопки или ввода ввода.

Формыпредставлены, а не кнопки.

---

Важные изменения в вашем коде:

• Нет.1: В вашей функции обработчика displayTable измените параметр на другое имя вместо taskModel.

• Почему? Вы пытаетесь использовать taskModel, предполагая, что он содержит данные задачи.Однако фактическое значение taskModel при вызове функции - это данные event.По умолчанию функции-обработчику при выполнении передается event object (созданный, когда произошло интересующее вас событие / действие) в качестве аргумента.

• Нет.2: Изменить taskModel[properties[j]] на taskModel[0][properties[j]]

• Почему? Вы должны указать index из taskModel при доступе к немутак как вы объявили его как массив.

var taskForm = document.getElementById('frm1');

taskForm.addEventListener('submit', displayTable);

function displayTable(event) {
  let taskModel = [{
    taskKeyword: document.getElementById('keyword-input').value,
    taskSize: document.getElementById('size-input').value,
    taskProfile: document.getElementById('profile-input').value
  }];
  var table = document.getElementById('taskTable');

  for (var i = 0; i < taskModel.length; ++i) {
    //var tasks = tasks[i];
    var row = document.createElement('tr');
    var properties = ['taskKeyword', 'taskSize', 'taskProfile'];
    for (var j = 0; j < properties.length; ++j) {
      var cell = document.createElement('td');
      cell.innerHTML = taskModel[0][properties[j]]; // You have to specify the index of the taskModel since you declared it as an array
      row.appendChild(cell);
    }
    table.appendChild(row);
  }

  // added event.preventDefault(); for demo purposes
  event.preventDefault();
}

<form id="frm1">
  <input id='keyword-input' type="text" placeholder="Keywords"></input>
  <input id="color-input" type="text" placeholder="Color"></input>
  <input id="size-input" type="text" placeholder="Size"></input>
  <input id="profile-input" type="text" placeholder="Profile"></input>
  <input id="proxy-input" type="text" placeholder="Proxy"></input>
  <input id="category-input" type="text" placeholder="Category"></input>
  <input id="tasks-input" type="number" placeholder="# Of Tasks"></input>
  <input id="schedule-input" type="time" placeholder="Schedule Task"></input>
  <input id="search-input" type="text" placeholder="Search Method"></input>
  <button type="submit" form="frm1" class="add-button" id='addTask'>Add Task</button>
</form>

<table id="taskTable">
</table>

Примечание. Я изменил реализацию taskModel для этого ответа в демонстрационных целях.