Javascript 如何在函数中使用“防止默认值”和“切换”？

我正在尝试建立一个库，用户可以在其中编写信息和书籍，并将其添加到库中。我创建了一个模式表单，用户可以在其中写入信息并提交

这是模态html

<form class="modal__container">
    <div class="modal">
        <div class="modal__content">
            <label for="">Title:</label>
            <input type="text" id="title"> 
        </div>
        <div class="modal__content">
            <label for="">Author:</label>
            <input type="text" id="author">
        </div>
        <div class="modal__content">
            <label for="">Pages:</label>
            <input type="number" id="pages">
        </div>
        <label for="">Have you read it?</label>
        <div>
            <label for="yes">Yes</label>
            <input type="radio" name ="read" value="yes">
            <label for="no">No</label>
            <input type="radio" name ="read" value="no">
        </div>
        
        <button class="add__book">Add</button>
        <button class="cancel">Cancel</button>
    </div>
</form>

这里我有构造函数和数组来存储书籍

let myLibrary = [];

function Book(title, author, pages) {
    this.title = title,
    this.author = author,
    this.pages = pages
}

现在我想创建一个提交新书的函数

submitBook.addEventListener("click", addBookToLibrary);

function addBookToLibrary() {

   let bookTitle = modalTitle.value;
   let bookAuthor = modalAuthor.value;
   let bookPages = modalPages.value;

   let book = new Book(bookTitle, bookAuthor, bookPages);
   myLibrary.push(book);

   console.log(bookTitle)
   console.log(bookAuthor)
   console.log(bookPages)
   toggle();

}

我看到信息半秒钟后，它就消失了。我知道我应该在某个地方使用默认值。我试过这个

function addBookToLibrary(e) {
    e.preventDefault();
   let bookTitle = modalTitle.value;
   let bookAuthor = modalAuthor.value;
   let bookPages = modalPages.value;

   let book = new Book(bookTitle, bookAuthor, bookPages);
   myLibrary.push(book);

   console.log(bookTitle)
   console.log(bookAuthor)
   console.log(bookPages)
   toggle();

}

---

它正确显示信息，但不关闭模式。如何修复它？

您当前有一个匿名函数，可以执行您想要的操作：关闭模式。它位于另一个匿名函数中，打开模式：

 addBtn.addEventListener("click", () => {
    modal.style.display = "block";
    const cancel = document.querySelector(".cancel");
    cancel.addEventListener("click", () => {
        modal.style.display = "none";
    });
});

您可以从该代码中“重构”出两个命名函数，如下所示：

 const hideModal = () => {
    modal.style.display = "none";
 };
 const showModal = () => {
    modal.style.display = "block";
    const cancel = document.querySelector(".cancel");
    cancel.addEventListener("click", hideModal);
 };
 addBtn.addEventListener("click", showModal);

然后，在其他事件处理程序中，可以调用以下任一函数：

function addBookToLibrary() {
  // ...
  hideModal();
}

---

您能显示您的模式html代码吗？@iamhuynq done！您不希望每次调用toggle时都添加侦听器。定义一个名为toggle的方法，该方法的主体是您现在拥有的侦听器的主体，设置侦听器以便它们调用toggle，然后调用toggle如何在表单submit中工作。创建close（）func并拆分toggle（）中的代码

function addBookToLibrary() {
  // ...
  hideModal();
}