javascript - 使用JS从表单中获取所有输入id

Question

我创建了 2 个函数:第一个目标不是基于 JSON，而是基于搜索表单的输入来构建 HTML 表。在这个阶段，我只想从表单中检索信息并制作一个简单的 console.log

const showResultsHTML = resultRequest => {
    const pageFormElements = getAllFormElements(document.getElementById("requestForm"));

    console.log(pageFormElements);

}

我的第二个功能是浏览表单并从表单中提取tag.id(输入id、选择id等)。在调试应用程序或制作简单的 console.log 标记值时，符合我的期望。

const getAllFormElements = element => {
    Array.from(element.elements).filter(
        tag => {
            ["select", "textarea", "input"].includes(tag.id);
        }
    )
}

当我尝试在 showResultsHTML 函数的控制台中显示结果时，它返回未定义。

Answer 1

您没有从 getAllFormElements 返回的函数中返回任何内容。您的过滤器中也存在同样的问题 - 您忘记返回。

const getAllFormElements = element => {
    return Array.from(element.elements).filter(
        tag => {
            return ["select", "textarea", "input"].includes(tag.id);
        }
    )
}

或删除大括号以隐式返回

const getAllFormElements = element => 
    Array.from(element.elements).filter(
        tag => ["select", "textarea", "input"].includes(tag.id)
    )

const showResultsHTML = resultRequest => {

    const pageFormElements = getAllFormElements(document.getElementById("requestForm"));

    console.log(pageFormElements);
}


const getAllFormElements = element =>  Array.from(element.elements).filter(
        tag =>  ["select", "textarea", "input"].includes(tag.id)
    )


showResultsHTML();

<form id="requestForm">
  <select id="select"></select>
  <textarea id="textarea"></textarea>
  <input id="input">
</form>