Javascript 'artırma' kodu çalışmıyor

Bir değişken tanımladım index diye. Butona tıklanınca index'in değeri artacak, dolayısıyla images objesinden yeni obje ekrana basılacak. Fakat hiçbir hata almamama rağmen çalıştıramadım. Ha şöyle bir şey var, index'in değerini manuel olarak değiştirince tüm bilgiler karşıma geliyor ama butona tıklayınca gelmiyor. Butonu seçtiğimi anlamak için konsola da yazdırdım. buton etiketine onclick olarak da yazdım. Çalışmıyor... :(

Geri
İleri

<script></script>



const images = [
{
title: "My First Slide",
url: "images/1.jpg",
figcaption: "LA always so much fun!"
},
{
title: "My Really Second Slide",
url: "images/2.jpg",
figcaption: "Nature is life."
},
{
title: "OMG This is the Third Slide",
url: "images/3.jpg",
figcaption: "Some days can be so relax..."
}
];

var index = 0;

document.querySelector(".card-img-top").setAttribute("src", images[index].url);
document.querySelector(".card-title").innerHTML = images[index].title;
document.querySelector(".card-text").innerHTML = images[index].figcaption;
console.log(index);


Şuan index sayınızı arttırıp veya eksiltmiyorsunuz. İndex sabit kalıyor. Butonlar altında onclick fonksiyonu tanımlayabilirsiniz. Ne kadar doğru olur bilmiyorum ama basit bir çözüm ile ileri butonunun altına "arttir" geri butonunun altına "eksilt" olarak birer adet onclick fonksiyon tanımlarsınız. Arttırma işlemi gerçekleştiğinde "arttir" fonksiyonu çalışır ve o anki index sayısına göre işlemleri yapar. Aynı durumu eksilt fonksiyonu içinde yaparsınız.

Js kodunuzu şu şekilde düzenleyeyim;



<script>
const images = [
{
title: "My First Slide",
url: "https://wmaraci.com/forum/images/1.jpg",
figcaption: "LA always so much fun!"
},
{
title: "My Really Second Slide",
url: "https://wmaraci.com/forum/images/2.jpg",
figcaption: "Nature is life."
},
{
title: "OMG This is the Third Slide",
url: "https://wmaraci.com/forum/images/3.jpg",
figcaption: "Some days can be so relax..."
}
];

var index = 0;

document.querySelector(".card-title").innerHTML = "Default Değer : " + index;
document.querySelector(".card-text").innerHTML = "Default Değer : " + index;
function arttir() {
index++
document.querySelector(".card-title").innerHTML = "Arttırıldı - Sayı : " + index;
document.querySelector(".card-text").innerHTML = "Arttırıldı - Sayı : " + index;
}
function eksilt() {
index--
document.querySelector(".card-title").innerHTML = "Eksiltildi - Sayı : " + index;
document.querySelector(".card-text").innerHTML = "Eksiltildi - Sayı : " + index;
}
</script>



En basit yöntem olduğunu düşünüyorum ama kullanmak istediğiniz duruma göre doğruluğu tartışılır :)

Not : " - " değere düşmemesi lazım onun eksiltme fonksiyonu içerisinde index değerinizi kontrol ettirin 0'ın altına inmeyecek şekilde ayarlayın :)

Çok teşekkür ederim mehmetmasa :)