Schaltfläche „Mehr laden“ in JavaScript ⇐ JavaScript

[Guest]

Ich arbeite daran, eine API aufzurufen, um Informationen von einer Website für die Filmsuche abzurufen. Ich versuche, in JavaScript eine Schaltfläche „Mehr laden“ zu erstellen, aber mein Code funktioniert nicht. Was könnte der Grund sein?

Code: Select all

document.addEventListener("DOMContentLoaded", initializePage);
document.addEventListener("DOMContentLoaded", () => {

const urlParams = new URLSearchParams(window.location.search);

const values = [...urlParams.values()];
const searchValue = values[0];
let yearValue = values[1];
let genreValue = values[2];

const yearCheckboxes = document.querySelectorAll(".yearlist-yearchk");
const genreCheckboxes = document.querySelectorAll(".genrelist-genrechk");

yearCheckboxes.forEach((checkbox) => {
if (checkbox.value === yearValue) {
checkbox.checked = true;
}
checkbox.addEventListener("change", () => {
yearCheckboxes.forEach((cb) => {
if (cb !== checkbox) {
cb.checked = false;
}
else if(checkbox) {
yearValue = checkbox.value;
console.log(yearValue);
getMovies(searchValue,yearValue,genreValue,1);
}
});
});
});

genreCheckboxes.forEach((checkbox) => {
if (checkbox.value === genreValue) {
checkbox.checked = true;
}
checkbox.addEventListener("change", () => {
genreCheckboxes.forEach((cb) => {
if (cb !== checkbox) {
cb.checked = false;
}
else if(checkbox) {
genreValue = checkbox.value;
console.log(genreValue);
getMovies(searchValue,yearValue,genreValue,1);
}
});
});
});

});

formEl.addEventListener("submit", (e) => {
e.preventDefault();
searchPoint();
});

document.addEventListener("DOMContentLoaded", () => {
const container = document.querySelector(".wrapper-itemcontainer");
const loadMoreButton = document.querySelector(".load-more");
let currentPage = 1;
const itemsPerPage = 5;

function renderData(items) {
// items.forEach((item) => {
//     const div = document.createElement("div");
//     div.className = "data-item";
//     // div.textContent = item;
//     container.appendChild(div);
// });
console.log (items)
}

const MOVIE_ID = "tt3896198";
const API_KEY = "2bf32dbe";

async function fetchData(page) {
try {
const response = await fetch(`http://www.omdbapi.com/?s=movie_title&apikey=${API_KEY}&page=${page}`);
if (!response.ok) {
throw new Error('네트워크 응답이 좋지 않습니다.');
}
const data = await response.json();
return data.items;
} catch (error) {
console.error('데이터를 가져오는 중 오류 발생:', error);
return [];
}
}

// "Load More"
loadMoreButton.addEventListener("click", async () => {
console.log('test')
const itemsToDisplay = await fetch(`http://www.omdbapi.com/?s=movie_title&apikey=${API_KEY}&page=1`);
if (itemsToDisplay.length > 0) {
renderData(itemsToDisplay);
currentPage++;
}
console.log(itemsToDisplay + "dfasd")

if (itemsToDisplay.length < itemsPerPage) {
loadMoreButton.classList.add("hide");
}
});

async function init() {
const initialItems = await fetch(`http://www.omdbapi.com/?s=movie_title&apikey=${API_KEY}&page=1`);
renderData(initialItems);
currentPage++;

if (initialItems.length < itemsPerPage) {
loadMoreButton.classList.add("hide");
}
}

init();
});

Ich habe im Code einen Platzhalter-API-Schlüssel verwendet.
Ich möchte, dass die Schaltfläche mehr Ergebnisse lädt, wenn darauf geklickt wird.
Außerdem möchte ich die Schaltfläche ausblenden, wenn sie vorhanden ist Es liegen keine Ergebnisse mehr vor.