javascript - 点击不立即更新页面
问题描述
所以,我将我的项目更新为 ES6 类,当我这样做时,我也使用 JS 创建了一些按钮。我下面的代码应该创建一个按钮(确实如此),然后当您单击该按钮时,它会在 ul 中生成一个随机文本/引用/电影。但是,它仅在我手动重新加载页面时更新页面。当我使用 html 标记和 html 中的“onclick”事件创建按钮时,它之前正在工作。
当我使用 JS 和 Classes 中的事件创建按钮时。它不再将其添加到以前的页面中。
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);
});
}
}
解决方案
推荐阅读
- java - 我如何从另一个文件(Android Studio)中使用我的文件中的对象
- java - 当我在具有 akka 流的现有消费者组中创建新消费者时,如何寻求结束 kafka 主题?
- odoo - 资产管理和递延收入不适用于 MultiCompany、MultiCurrency
- angular - 如何在模态中显示轮播的每个图像的信息?
- python-3.x - 使用 Python 3 扩展安装 cwiid
- javascript - 嵌入式 Google 电子表格中的范围和表格的超链接
- python - pysmb 将文件从 Ubuntu 复制到 Windows 网络共享文件夹
- powershell - 尝试抓住不会抓住
- node.js - 如何修复对等依赖项安装问题
- sql - SQL Server 中 OBJECT_ID() 的 postgresql 等价物是什么?