按鈕單擊重置 web 頁面

Question

只要我單擊發出簡單警報的按鈕，web 頁面就會重置。 僅當從一開始就單擊不在 DOM 中的按鈕時才會出現此問題。

function addNewBook (book, author, pages) {
    // Add inputs and labels to the HTML form
    document.getElementById('book-form').innerHTML = 
    `<label for="book">Name</label><br>
    <input type="text"><br>
    <label for="author">Author</label><br>
    <input type="text"><br>
    <label for="pages">Pages</label><br>
    <input type="text"><br>
    <div id="button-div">
        <button id="submit-button">SUBMIT</button>
    </div>`
}

// Adding eventlistener to already-existing button that
// triggers the creation of the next button
document.getElementById("new-book-button").addEventListener("click", function () {
    addNewBook("goodName", "goodAuthor", "540")
});

// When this button is clicked, the webpage is reset, 
// the book + form created by the addNewBook function are removed.
// Event delegation used since button is not in the DOM from the beginning.
document.querySelector('body').addEventListener('click', event => {
    if (event.target.matches('#submit-button')) {
        alert('hi')
    }
});

如何解決這個問題，以便我可以簡單地折疊表單並允許用戶通過再次彈出表單來添加另一本書？

Answer 1

對於大多數瀏覽器，默認的按鈕類型是提交。 向按鈕添加類型屬性，當分配事件處理程序 function（通常用於單擊事件）時，可以對其進行編程以控制自定義功能。

<button type="button" id="submit-button">SUBMIT</button>

Answer 2

只需添加 event.preventDefault();

document.querySelector('body').addEventListener('click', event => {
    if (event.target.matches('#submit-button')) {
event.preventDefault();
        alert('hi')
    }
});