Вставить html для каждого элемента массива

16 марта 2022, 12:40

есть разметка:

<div id="time-part" class="reserv__dates">
</div>

и есть JS , его приведу ниже.

Я получаю на входе коллекцию html элементов, с определенным css классом. Каждый из этих элементов имеет информацию в data атрибутах. Моя задача взять из каждого элемента информацию из этих data атрибутов и вставить их в блок html приведенный выше. В data атрибутах есть день и месяц, который мне нужно вывести в одинаковый блок html.

Мой код делает то что мне нужно, но выводит только один блок. Те если мне приходит коллеция с одним блоком, все работает, если с 2 и более , то он видимо выводит информацию из каждого, но заменяет ее каждым следующим, и в моем html остается только информация из последнего блока.

вот код:

const timePartBlock = document.getElementById('time-part');
nextButton1.addEventListener('click', function(event){
    let allActiveDays = document.getElementsByClassName('month__date-active');
    if (allActiveDays.length == 0 ) {
        alert('Выберите интересующую дату');
    } else {
        for (i = 0; i < allActiveDays.length; i++) {
                let dateDay = allActiveDays[i].dataset.day;
                let dateMonth = allActiveDays[i].dataset.month;
                timePartBlock.innerHTML = '<div class="reserv__date" >' + dateDay + ' ' + dateMonth + '</div>'; 
            }         
        }; 
})

Answer 1

в итоге верное решение:

const timePartBlock = document.getElementById('time-part');
nextButton1.addEventListener('click', function(event){
    let allActiveDays = document.getElementsByClassName('month__date-active');
    let data;

    if (allActiveDays.length == 0 ) {
        alert('Выберите интересующую дату');
    } else {
        for (i = 0; i < allActiveDays.length; i++) {
                let dateDay = allActiveDays[i].dataset.day;
                let dateMonth = allActiveDays[i].dataset.month;
                data += '<div class="reserv__date" >' + dateDay + ' ' + dateMonth + '</div>'; 
            }
           timePartBlock.innerHTML = data;
        };

})

добавил новую переменную, и в нее записывал результат