JS函数重复

Question

function addObjectToArray(formInfo) {
  const newObject = new Object(formInfo);
  array.push(form);
}

function getFormInfo() {
  const form = document.getElementById("form");
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    // code here
    addObjectToArray(formData);
  });
}

当按下页面上的按钮时，整个功能第一次可以正常工作，但每个表单都可以工作，但还会添加一个额外的空表单。只是寻找有关去哪里寻找的任何建议。

表单将表单信息作为对象添加到对象数组中。

在函数开始处添加了一个断点，当跳过断点时，在箭头函数的右括号之后，它会重新开始箭头函数的开始。

Answer 1

创建一个单独的函数来处理表单提交。在新函数中，处理数据后，在提交后删除事件侦听器，并可选择在提交后重置表单

function getFormInfo() {
  const form = document.getElementById("form");

  const submitHandler = (event) => {
    event.preventDefault();
    const formData = new FormData(form); // Get form data
    const formInfo = Object.fromEntries(formData.entries()); // Convert form data to object
    addObjectToArray(formInfo); // Add object to the array
    form.removeEventListener('submit', submitHandler); // Remove the event listener
    form.reset(); // Optionally reset the form after submitting
    form.addEventListener('submit', submitHandler); // Add the event listener back after resetting
  };

  form.addEventListener("submit", submitHandler);
}