Не получается добавить тур в избранное
Чистый JS. Все туры хранятся на сервере, данные уже получены, всё работает, кроме "добавить в избранное" и показать "избранные туры"
//отобразить все туры по клику
let buttonAllTours = document.getElementById("allToursBtn")
buttonAllTours.addEventListener("click", () => {
renderTours(tours)
} )
let favoriteTours = [] //массив с любимыми турами
tours.forEach((tour) => {
let buttonAddToFavorite = document.getElementById(`button-addFavorite-${tour.id}`) //нахожу кнопку каждого тура
buttonAddToFavorite.addEventListener("click", () => {
const tour = tours.find((findTour) => { //находим нужный тур
return findTour.id === id //находим id тура
})
favoriteTours.push(tour) //добавляем тур в любимые
let allFavoritesTours = document.getElementById("favoriteToursBtn") //находим "показать избранные туры"
allFavoritesTours.addEventListener("click", () => {
renderTours(favoriteTours)
})
})
})
Ответы (1 шт):
Автор решения: bilal
→ Ссылка
const clearTours = () => {
// Функция очищает туры
const toursComponent = document.getElementById("toursList");
toursComponent.textContent = "";
};
const renderTours = (tours) => {
// Функция рендиринга туров
clearTours(); // Очищаем туры, чтобы не дублировались
const toursComponent = document.getElementById("toursList");
for (let tour of tours) {
const tourComponent = document.createElement("div");
tourComponent.innerHTML = tour.text;
tourComponent.id = `button-addFavorite-${tour.id}`;
tourComponent.addEventListener("click", () => {
favoriteTours.push(tour);
});
toursComponent.appendChild(tourComponent);
}
};
const tours = [{
id: 0,
text: "Тур 1"
},
{
id: 1,
text: "Тур 2"
},
{
id: 2,
text: "Тур 3"
},
];
let favoriteTours = []; //массив с любимыми турами
let buttonAllTours = document.getElementById("allToursBtn");
buttonAllTours.addEventListener("click", () => {
favoriteTours = [];
renderTours(tours);
});
let allFavoritesTours = document.getElementById("favoriteToursBtn"); //находим "показать избранные туры"
allFavoritesTours.addEventListener("click", () => {
renderTours(favoriteTours);
});
<button id="allToursBtn">allToursBtn</button>
<button id="favoriteToursBtn">favoriteToursBtn</button>
<div id="toursList"></div>