如何将Javascript函数重构为Javascript类方法？

如何解决如何将Javascript函数重构为Javascript类方法？

我创建了一个Javascript SPA，该Java SPA允许用户创建阅读日志，在该日志中，他们可以添加体裁，然后添加在该体裁中阅读过的图书。现在，它具有用于类型和书籍的简单JS类，其后是用于诸如添加，显示和编辑这些项目之类的普通JS函数。

例如：

    class Genre {
    constructor(name) {
        this.name = name
    };
}

function listGenres() {
    resetFormArea()
    document.getElementById("genreSection").innerHTML = ""
    let genreSection = document.getElementById("genreSection") 
    fetch(BASE_URL + "/genres")
    .then(resp => resp.json())
    .then(genres => {
        genres.sort()

    genreSection.innerHTML += genres.map(genre => `
        <div class="genreItem">
        <a href="#" data-name="${genre.name}" data-id="${genre.id}">${genre.name}</a><br><br>
        <button data-name="${genre.name}" class="addBook" data-id="${genre.id}">Add Book</button>
        <button data-id="${genre.id}" class="editGenre" onclick="editGenre(${genre.id})"; return false;>Edit Genre Name</button>
        <button data-id="${genre.id}" class="deleteGenre" onclick="deleteGenre(${genre.id})"; return false;>Delete Genre</button>
        </div>
    `).join('')

    let newBook = document.querySelectorAll("button.addBook")
    newBook.forEach(addBookButton => {
        addBookButton.addEventListener("click",(e) => {
            addBook(e)
            e.preventDefault()
        })
    })

    let booksByGenre = document.querySelectorAll("a")
    booksByGenre.forEach(genre => {
        genre.addEventListener("click",(e) => {
            e.preventDefault()
            genreBooks(e.currentTarget.dataset.id)
        })
    })
    })
}

function addGenre() {
    let newGenre = new Genre(document.getElementById("Genre Name").value)

    let genreSection = document.getElementById("genreSection")
    fetch(BASE_URL + "/genres",{
        method: "POST",body: JSON.stringify(newGenre),headers: {
            'Content-Type': 'application/json','Accept': 'application/json'
        }
    })
    .then(resp => resp.json())
    .then(genre => {
        genreSection.innerHTML += `
        <div class="genreItem">
        <a href="#" data-name="${genre.name}" data-id="${genre.id}">${genre.name}</a><br><br>
        <button data-name="${genre.name}" class="addBook" data-id="${genre.id}">Add Book</button>
        <button data-id="${genre.id}" class="editGenre" onclick="editGenre(${genre.id})"; return false;>Edit Genre Name</button>
        <button data-id="${genre.id}" class="deleteGenre" onclick="deleteGenre(${genre.id})"; return false;>Delete Genre</button>
        </div>
        `
        let newBook = document.querySelectorAll("button.addBook")
        newBook.forEach(addBookButton => {
            addBookButton.addEventListener("click",(e) => {
                addBook(e)
                e.preventDefault()
            })
        })

        let booksByGenre = document.querySelectorAll("a")
        booksByGenre.forEach(genre => {
            genre.addEventListener("click",(e) => {
                e.preventDefault()
                genreBooks(e.currentTarget.dataset.id)
            })
        })
    
    })   
}

第一个功能用于显示类型列表，第二个功能在提交“添加类型”表单时被调用。到目前为止，我已经尝试过将它们作为静态类方法进行重做，但是我什至无法使它们正常工作。例如，新类型不会出现，甚至不会保存在数据库中。我玩过很多代码，没有运气。而且我可能仍需要为我的方法缩减代码。 也许我只是不了解类方法应该如何工作（是的，我在这方面还是很新的！）。任何帮助将不胜感激。