事件监听程序未触发？

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>

我已经尝试在脚本中进一步向下移动侦听器，并尝试将其嵌入到onload函数中，但都没有解决问题。

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‘按钮后执行，但它并没有出现在开发工具的事件侦听器中。

Answer 1

您必须将侦听器添加到您的form，而不是button。

从official docs

在提交表单时触发submit事件。

请注意，提交仅在表单元素上触发，而不是按钮或提交输入。

表单是提交的，而不是按钮。

对代码的重要更改：

• No.1:在taskModel.

处理程序函数中，将参数更改为其他名称，而不是displayTable

• 为什么？您正在尝试使用taskModel，假设它包含任务数据。但是，调用函数时taskModel的实际值是event数据。默认情况下，处理程序函数在执行时会将event object (在您感兴趣的事件/操作发生时创建)作为参数传递。

• No.2:将taskModel[properties[j]]更改为taskModel[0][properties[j]]

• 为什么？访问taskModel时必须指定它的index，因为您已将其声明为数组。

​

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实现。