Почему содержимое моей скрытой карты не обновляется правильно при навигации с помощью стрелок? ⇐ CSS

[Anonymous]

Я пытаюсь создать функцию навигации по карточкам на JavaScript, где при нажатии на карточку отображается ее содержимое в элементе HiddenCard, и я могу перемещаться между карточками с помощью кнопок со стрелками влево и вправо.
Выбор карт и скрытая карта:

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

var cards=document.querySelectorAll(".card");

var hiddenCard=document.querySelector(".card_hidden")

var currntIndex=0;

Добавление события клика на каждую карточку:

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

for (var i = 0; i < cards.length; i++) {
cards[i].addEventListener("click", function () {
currntIndex = Array.from(cards).indexOf(this);

var image = this.querySelector("img");
var title = this.querySelector(".title p");

hiddenCard.innerHTML = `
${title.textContent}
[i]
[/i]
[i][/i]
`;

hiddenCard.style.display = "block";

console.log(hiddenCard);

arrows();
});
}

Добавление навигации со стрелками:

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

function arrows() {
document.querySelector(".pre").addEventListener("click", function () {
if (currntIndex > 0) {
currntIndex--;
showIndex(currntIndex);
}
});

document.querySelector(".next").addEventListener("click", function () {
if (currntIndex < cards.length - 1) {
currntIndex++;
showIndex(currntIndex);
}
});
}

Обновление скрытой карты:

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

function showIndex(currntIndex) {
var imagIndex = cards[currntIndex].querySelector("img");
var titleIndex = cards[currntIndex].querySelector(".title p");

hiddenCard.innerHTML = `
${titleIndex.textContent}
[i]
[/i]
[i][/i]
`;
}

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

Подробнее здесь: https://stackoverflow.com/questions/793 ... ith-arrows