Отображение и фильтрация изображений с помощью события Click vanillajs ⇐ Html

[Anonymous]

Я хочу динамически отображать изображения и перечислять элементы. Затем я хочу отфильтровать изображения на основе элемента списка (жанр), который нажимается. Есть 2 изображения на элемент списка. Элементы списка отображаются в середине страницы с одним изображением по обе стороны от страницы. Мне не обязательно нужен ответ, но дайте мне знать, если я иду в правильном направлении, а если нет, то какие ошибки я допускаю. < /P>

Код: Выделить всё

const imageContainer1 = document.querySelectorAll('.image-container-1');
const imageContainer2 = document.querySelectorAll('.image-container-2');
const genreList = document.getElementById('genre-list');
const albums = [
{
id: 1,
genre: 'Rock',
image1: '/images/album-covers/jimihindrix-areyouexperienced.jpg',
image2: '/images/album-covers/thedoors.jpg',
},
{
id: 2,
genre: 'Jazz',
image1: '/images/album-covers/somethinelse.jpg',
image2: '/images/album-covers/MilesDavis-BitchesBrew.jpg',
},
{
id: 3,
genre: 'Hiphop',
image1: '/images/album-covers/mfdoom-mmfood.jpg',
image2: '/images/album-covers/nas-illmatic.jpg',
},
{
id: 4,
genre: 'Soul',
image1: '/images/album-covers/aliciakeys-diary.jpeg',
image2: '/images/album-covers/ettajames-tellmama.jpg',
},
{
id: 5,
genre: 'Electronic',
image1: '/images/album-covers/burial-tunes.jpg',
image2: '/images/album-covers/björk-homogenic.jpg',
},
{
id: 6,
genre: 'Classic',
image1: '/images/album-covers/sparks-kimonomyhouse.jpg',
image2: '/images/album-covers/chakakhan-rufus.jpg',
},

{
id: 7,
genre: 'Pop',
image1: '/images/album-covers/beatles-sgtpeppers.jpg',
image2: '/images/album-covers/prince-purplerain.png.webp',
},
];

const handleClick = (e) => {
const clickedElement = e.target.id;
albums.map((album) => {
genreList.innerHTML = `[*]${album.genre}`;
});
document.getElementById(`${albums.genre}`).addEventListener('click', () => {
albums.filter((p) => {
if (p.name === clickedElement) {
imageContainer1.innerHTML = `
[img]${p.image1}/[/img]
`;
imageContainer2.innerHTML = `
[img]${p.image2}/[/img]
`;

}
});
});
};

document.addEventListener('DOMContentLoaded', (e) => {
handleClick(e);
});< /code>


[list][/list]

Подробнее здесь: https://stackoverflow.com/questions/797 ... -vanillajs