如何在函数内使用防止默认和切换？答案

【问题标题】：how to use prevent default and toggle inside a function?如何在函数内使用防止默认和切换？
【发布时间】：2020-06-21 14:31:32
【问题描述】：

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

这是模态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>

这是点击取消按钮时关闭模态框的功能

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

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

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();

}

它会正确显示信息，但不会关闭模式。我该如何解决？

【问题讨论】：

你能显示你的模态html代码吗？
您不想在每次调用 toggle 时都添加监听器。定义一个名为 toggle 的方法，其主体是您现在拥有的侦听器的主体，设置您的侦听器以便它们调用切换，然后调用切换您在表单提交中的状态。
创建一个 close() 函数并拆分出 toggle() 中的代码

标签： javascript preventdefault

【解决方案1】：

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

 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();
}

【讨论】：