Блог

Итак, я обновляю свой проект до классов ES6, и когда я это сделал, я также создал несколько кнопок, используя JS. Мой приведенный ниже код должен создать кнопку (это так), затем, когда вы нажимаете на кнопку, она генерирует случайный текст / цитату / фильм в ul. Однако он обновляет страницу только при перезагрузке страницы вручную. это работало ранее, когда я создавал кнопку, используя html-тег и событие «onclick» в html.

Когда я создал кнопку, используя 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);
            });
    }


}