我正在嘗試建立一個圖書館，用戶可以在其中編寫信息和書籍并將其添加到圖書館。我創建了一個模式表單，用戶可以在其中編寫信息并提交。這是模態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();}我看到信息半秒鐘然后消失了。我知道我應該在某處使用防止默認值。我試過這個它正確顯示信息，但不會關閉模式。我該如何解決？