Почему результаты моего Foreach меняются каждый раз, когда страница загружается [дублировать] ⇐ Html

[Anonymous]

Я хочу динамически создавать элементы списка. Я использовал Foreach, и консоль зарегистрировал UL, но результаты не согласуются в консоли, когда я перезагружаю страницу. Они последовательны в пользовательском интерфейсе. Но в консоли иногда показывает

. Я могу нажать на него и увидеть 7 элементов списка и их идентификаторы. В других случаях он показывает ul#жанр-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: 'Hip-Hop',
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 genreList = document.getElementById('genre-list');

const handleClick = () => {
albums.forEach((album) => {
const content = `[*]${album.genre}`;
genreList.innerHTML += content;
console.log(genreList);
});
};

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

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