Как подгружать по 4 объекта?

Question

[Smeecy Smeecy]

У меня есть массив из 24 объектов, но выводится только первые 8, остальные должны подгружаться по 4 штуки при нажатии на кнопку (Посмотреть ещё), как правильно это реализовать?

let kitchenList = document.querySelector('.type-wardrobe');
let buttonMore = document.getElementById("btnMore");
let maxItems = 8;

function outputKitchens() {
    for (let i = 0; i < maxItems; i++) {
            let kitchenItem = document.createElement('li');
            kitchenItem.classList.add('type');
            kitchenList.append(kitchenItem);
    }
}

Comments

[Сергей Сергей]

после первого вывода поменять maxItems, прямо в той же процедуре после цикла.

[szQocks]

Гугли пагинация

Answer 1

[FeST1VaL]

На быструю руку накидал вариант. Он не идеален... тк не понятно что вы делаете)

Comments

[Smeecy Smeecy]

FeST1VaL Вот как у меня , у меня уже есть объекты, в примере их 16, выводятся 8. Мне необходимо, чтобы при нажатии на кнопку "Смотреть больше" добавлялись следующие 4 объекта и так пока не выведутся все (в данном случае пока что 16). Попробовал Ваш пример, постоянно выводятся только первые 4 объекта и нет максимума.

[Konfy]

Smeecy Smeecy, а планируется потом убирать кухни из списка? Если да, то текущий пример для этого подходит так себе

[FeST1VaL]

Smeecy Smeecy, Так ваш вариант так и работает... или в чем вопрос... Единственное что у вас ошибка в kitchens[tempCounter++]. А в моем варианте я же не знал что у вас массив есть) потому и написал что не понятно что вы делаете в итоге) Я предположил конечно вариант с массивом, но откинул тк по коду это было не сильно ясно.