Javascript 单击“不立即更新页面”

因此，我正在将我的项目更新为ES6类，当我更新时，我还使用JS创建了一些按钮。我下面的代码应该创建一个按钮（确实如此），然后当您单击该按钮时，它会在ul中生成一个随机文本/引用/电影。但是，它仅在我手动重新加载页面时更新页面。以前，当我使用html标记和html中的“onclick”事件创建按钮时，它是有效的

当我使用JS和类中的事件创建按钮时。它不再将其添加到以前的页面中

index.js

const BASE_URL = 'http://localhost:3000';
const MOVIES_URL = `${BASE_URL}/movies`;

// ApiService call
const api = new ApiService;

// ApiService - Fetches all movies in JSON
api.getAllMovies().then(data => {
        renderMoviesList(data);
    })
    .catch(error => {
        console.log(error);
    });

// Create Generate Movie button
const genMovieBtn = document.createElement('button');
const genBtnDiv = document.querySelector('.genBtn');
genMovieBtn.innerHTML = 'Generate Movie';
genMovieBtn.className = 'btn btn-primary';
genMovieBtn.addEventListener('click', () => api.addMovie())
genBtnDiv.append(genMovieBtn);


// Iterates through movie json
function renderMoviesList(movies) {
    movies.data.forEach(movie => {
        renderMovie(movie)
    })
}

// Generates new movie/quote/delete button/add quote and creates elements
function renderMovie(movie) {
    const movieUL = document.querySelector('#movie-list');
    const movieLi = document.createElement('li');
    const quotes = document.createElement('div')
    const p = document.createElement('p');
    const br = document.createElement('br');
    const hr = document.createElement('hr');
    const deleteMovieBtn = document.createElement('button');
    const addQuoteBtn = document.createElement('button');
    const blockQuote = document.createElement('blockquote');
    let footerList = [];

    movieLi.className = 'movie-card';
    quotes.className = 'quotes'
    blockQuote.className = 'blockquote';
    p.className = 'mb-0';
    movieLi.dataset.id = movie.id
    p.innerHTML = movie.attributes.title;
    movie.attributes.quotes.forEach(quote => {
        let footer = document.createElement('footer');
        footer.innerHTML = quote.sentence;
        footer.className = 'blockquote-footer';
        footerList.push(footer);
    })

    movieLi.append(p, quotes);
    footerList.forEach(el => {
        quotes.append(el);
    });
    movieLi.append(br, addQuoteBtn, deleteMovieBtn, hr);
    movieLi.append(blockQuote);
    movieUL.append(movieLi);

    // Create Delete Movie button
    deleteMovieBtn.innerHTML = 'Delete Movie';
    deleteMovieBtn.className = 'btn btn-danger';
    deleteMovieBtn.addEventListener('click', () => deleteMovie())

    // DELETE function to Delete movie form Li list
    function deleteMovie() {
        return fetch(`${MOVIES_URL}/${movie.id}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(movieLi.remove())
    }

    // Create Add Quote button
    addQuoteBtn.innerHTML = 'Add Quote';
    addQuoteBtn.className = 'btn btn-warning';
    addQuoteBtn.addEventListener('click', () => addQuote())

    // PUT function to create add quote button action and run UpdateMovie
    function addQuote() {
        return fetch(`${MOVIES_URL}/${movie.id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => updateMovie(data.data))
    }

}

// Updates movie object with the new quote
function updateMovie(movie) {
    const movieLis = document.querySelectorAll('.movie-card')
    const movieLisObjects = Array.from(movieLis)
    const movieLi = movieLisObjects.find(movieLiObject => movieLiObject.dataset.id === `${movie.id}`)
    const quotesDiv = movieLi.querySelector('.quotes')
    const footers = movieLi.querySelectorAll("footer")
    const footersQuotes = Array.from(footers).map(quote => `${quote.innerHTML}`)
    movie.attributes.quotes.forEach(quote => {
        if (!footersQuotes.includes(quote.sentence)) {
            const footer = document.createElement('footer');
            footer.innerHTML = quote.sentence;
            footer.className = 'blockquote-footer';
            quotesDiv.append(footer);
        }
    })
}

// Updates movie object with the new quote
function updateMovie(movie) {
    const movieLis = document.querySelectorAll('.movie-card')
    const movieLisObjects = Array.from(movieLis)
    const movieLi = movieLisObjects.find(movieLiObject => movieLiObject.dataset.id === `${movie.id}`)
    const quotesDiv = movieLi.querySelector('.quotes')
    const footers = movieLi.querySelectorAll("footer")
    const footersQuotes = Array.from(footers).map(quote => `${quote.innerHTML}`)
    movie.attributes.quotes.forEach(quote => {
        if (!footersQuotes.includes(quote.sentence)) {
            const footer = document.createElement('footer');
            footer.innerHTML = quote.sentence;
            footer.className = 'blockquote-footer';
            quotesDiv.append(footer);
        }
    })

}

ApiService.js

class ApiService {

    // Fetches all movies in JSON
    getAllMovies() {
        return fetch(MOVIES_URL)
            .then(response => {
                if (!response.ok) {
                    throw Error("ERROR");
                }
                return response.json();
            })
    }

    // POST method to add new movie to list
    addMovie() {
        return fetch(MOVIES_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    "Accept": "application/json" // how we want the response formatted
                }
            })
            .then(response => {
                return response.json();
            })
            .then(data => {
                return data;
            })
            .catch(error => {
                console.log(error);
            });
    }


}

---

你能上传完整的代码吗？我在你的代码中没有看到关于

ul

的任何内容，因此我不知道该代码如何可能更新一个。@schu34更新了上面的代码，对此表示抱歉