Вы создаете массив, из объектов, объект ссылочный тип, это значит что у вас по 6 копий ссылок на один и тот же объект. Когда вы вставляете элемент на странице, а потом снова его куда-то вставляете, то он не дублируется, а переносится в последнее указанное место, поэтому у Вас их столько сколько было изначально.
Можно использовать клонирование, но у вас там кнопка и я подозреваю что на ней есть событие. Поэтому тут несколько вариантов. Возможно вам подойдет делегирование, а возможно нет, тогда на клонированные элементы нужно повторно добавить события.
const one = document.getElementById('one')
one.addEventListener('click', ({target})=>{
console.log(target.textContent)
})
const two = one.cloneNode(true)
two.textContent = "Вторая кнопка" // будет без события
document.body.appendChild(two)
<button id="one">Первая кнопка</button>
Вместо container.innerHTML = ''
, можно использовать container.replaceChildren()
— делает то же самое.
Вместо такой конструкции можно воспользоваться методами массива:
for (let i = 0; i < 6; i++) {
for (let card of cards.slice(i,).concat(cards.slice(0, i))){
allCards.push(card);
}
}
С учетом всего вышесказанного можно написать такой код:
// то что не меняете пишите как const
const container = document.querySelector('.pets_cards')
const cards = Array.from(container.querySelectorAll('.card'))
// добавляем обработчик через onclick проще не нужно думать
// об удалении обработчика если эта процедура будет вызвана
// несеолько раз
cards.forEach((card) => card.onclick= () => {
console.clear()
console.log(card.querySelector('img').alt)
})
cards.sort(() => Math.random() - 0.5)
const arr = Array.from(new Array(48)) // выставляем нужное количество
// не используемые переменные можно иногда именовать _
const allCards = arr.reduce((acc,_ , i) =>{
// берем кноку через % таким образом циклически перебираем
const cardOrig = cards[i % cards.length]
const newCard = cardOrig.cloneNode(true)
newCard.querySelector('.card_button').onclick = cardOrig.onclick
return [...acc, newCard]
}, [])
container.replaceChildren(...allCards); // вставляем результат
.pets_cards{
display:flex;
flex-wrap: wrap;
font-size: 0.7em;
}
.card {
border: 2px solid gray;
width: 60px;
}
<div class="pets_cards">
<div class="card card_1"> <!-- Вместо класса card_1 лучше id -->
<div class="image">
<img src="../../assets/images/pets-katrine.png" alt="pets-katrine1">
</div>
<p class="card_title">Katrine</p>
<button class="card_button">Learn more</button>
</div>
<div class="card card_2">
<div class="image">
<img src="../../assets/images/pets-katrine.png" alt="pets-katrine2">
</div>
<p class="card_title">Katrine</p>
<button class="card_button">Learn more</button>
</div>
</div>