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：：在displayTable处理函数中，将参数更改为其他名称，而不是taskModel。
为什么？您正在尝试使用taskModel并假设它保存任务数据。但是，调用该函数时taskModel的实际值为event数据。默认情况下，处理程序函数在执行时会作为参数传递event object（在您感兴趣的事件/动作发生时创建）。
第二号：将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

注意：出于演示目的，我对此答案修改了`onclick="getReqDetails(${data[i]})`实现。

事件监听器未触发？

1 个答案: