Event listener not triggering?

Question

I am trying to push array elements gathered from an input to a HTML table. The event listener is not triggering for some reason, here is the 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>

I have tried moving the listener further down the script, and I have tried embedding it in an onload function, but neither have solved the issue.

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);
    }
  }

I expected the function to be executed once the 'addTask' button is pressed, but it is not appearing in the dev tools event listener.

Answer 1

You have to add the listener to your form instead of the button.

From the official docs:

The submit event is fired when a form is submitted.

Note that submit is fired only on the form element, not the button or submit input.

Forms are submitted, not buttons.

---

Important changes to your code:

• No.1: In your displayTable handler function, change the parameter to a different name instead of taskModel.

• Why? You're trying to use taskModel assuming that it holds the task data. However, the actual value of taskModel when the function is called is the event data. The handler function, by default, when executed is passed the event object (that was created when the event/action you are interested in happened) as an argument.

• No.2: Change taskModel[properties[j]] to taskModel[0][properties[j]]

• Why? You have to specify the index of the taskModel when accessing it since you declared it as an array.

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>

Note: I modified the taskModel implementation on this answer for demo purposes.