как использовать предотвращение по умолчанию и переключение внутри функции? - PullRequest
Новая
       86

как использовать предотвращение по умолчанию и переключение внутри функции?

1 голос
/ 21 июня 2020

Я пытаюсь создать библиотеку, в которой пользователь может написать информацию и книгу и добавить ее в библиотеку. Я создал модальную форму, в которой пользователь может записать информацию и отправить ее.

Это модальный 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();

}

Он отображает информацию правильно, но не закрывает модальное окно. Как исправить?

1 Ответ

2 голосов
/ 21 июня 2020

В настоящее время у вас есть анонимная функция, которая делает то, что вы хотите: закройте модальное окно. Он находится внутри другой анонимной функции, которая открывает модальное окно: 

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