如何找到 3 个输入的值

Question

我创建了一个弹出的表单，现在我想将输入值存储在数组中的 3 个单独的值中

const book

。

该项目将是一个图书馆应用程序，您最终可以在其中删除/添加书籍，并且它是 Odin 项目课程的一部分：https://www.theodinproject.com/lessons/node-path-javascript-library

这是我的存储库：https://github.com/Rutchyy/library（重点关注

app.js

文件中的第53行。）

const book = submit.addEventListener("click", (event) => {
    event.preventDefault();
    let name = newForm.firstChild.firstChild // How do I navigate to the title input?
    console.log(name)
})

和 HTML：

<form method="get" id="new-book-form">
            <div>
                <label for="title">Title</label>
                <input type="text" id="title" name="title">
            </div>
            <div>
                <label for="author">Author</label>
                <input type="text" id="author" name="author">
            </div>
            <div>
                <label for="pages">Pages</label>
                <input type="number" id="pages" name="pages">
            </div>
            <button id="create-book">Create Book</button>
        </form>

Answer 1

您可以使用

FormData

，您可以直接发布它或使用

Object.fromEntries()

从中创建一个对象：

document.getElementById('new-book-form').addEventListener("submit", e => {
    event.preventDefault();
    const book = Object.fromEntries(new FormData(e.target));
    console.log(book);
})

<form method="get" id="new-book-form">
            <div>
                <label for="title">Title</label>
                <input type="text" id="title" name="title">
            </div>
            <div>
                <label for="author">Author</label>
                <input type="text" id="author" name="author">
            </div>
            <div>
                <label for="pages">Pages</label>
                <input type="number" id="pages" name="pages">
            </div>
            <button id="create-book">Create Book</button>
        </form>