Why aren't the functions working for displaying my images in an array?

Question

I'm a beginner with JavaScript and I cant seem to get my code to work. I have this assignment that's long overdue and I cannot seem to get my goForward() ">>>" and goBackward() "<<<" functions to work properly. It's supposed to start at the index and each time you click the ">>>" button, it'll show the next image in the array. Same for the "<<<" button. I have 5 images in my array, and the ">>>" is showing 4 images then going back to the 1st image. The "<<<" is just broken. Sometimes it'll show the previous image and then skip to the 5th image. After that, it wont work. Something is broken and I can't figure it out. Please help!! Here is my code https://codepen.io/oshitaiya/pen/mddNWaq enter code here . Here is my assignment requirements https://docs.google.com/document/d/12IcETUGbgxC4jKBs0BK8HHLrjB_35mVlqK1kGTVIg-Y/edit?usp=sharing

Answer 1

By keeping what you have. Running all the logic BEFORE appending.

var kawaii = ["https://media.giphy.com/media/3oKIPy2hjnheNraWwo/giphy.gif",
"https://media1.giphy.com/media/l3UcgEIw80eyb36kU/source.gif",
"https://media1.giphy.com/media/xTiN0mN3wxWO0MDuGk/source.gif",
"https://media2.giphy.com/media/3o6EhPDMjaDP5UC4ZW/source.gif",
"https://66.media.tumblr.com/3b9394556e6e0c6271594be2339c5d21/tumblr_nqkmdcPzbd1qak30bo1_500.gifv"]

var index = 0

function goForward(){
    index++
    if (index > kawaii.length - 1) {
         index = 0
    }
    document.getElementById("imgid").src = kawaii[index]
}

function goBackward(){
    index--
    if (index < 0) {
        index = kawaii.length - 1
    }
    document.getElementById("imgid").src = kawaii[index]
}

Answer 2

I've edited your code somewhere by replacing the two functions with changeImage function.

 var kawaii = ["https://media.giphy.com/media/3oKIPy2hjnheNraWwo/giphy.gif", "https://media1.giphy.com/media/l3UcgEIw80eyb36kU/source.gif", "https://media1.giphy.com/media/xTiN0mN3wxWO0MDuGk/source.gif", "https://media2.giphy.com/media/3o6EhPDMjaDP5UC4ZW/source.gif", "https://66.media.tumblr.com/3b9394556e6e0c6271594be2339c5d21/tumblr_nqkmdcPzbd1qak30bo1_500.gifv"] var index = 0 function changeImage() { index = index < 0 ? kawaii.length - 1 : index; index = index === kawaii.length - 1 ? 0 : index; document.getElementById("imgid").src = kawaii[index]; index++; }; 

 body { background-color: #a3d5d3; } 

 <h1>Image Gallery</h1> <img id="imgid"/><br> <input type="button" onclick="changeImage()" value="<<<<"/> <input type="button" onclick="changeImage()" value=">>>>"/> 

---

Or if you want to keep the two functions:

 var kawaii = ["https://media.giphy.com/media/3oKIPy2hjnheNraWwo/giphy.gif", "https://media1.giphy.com/media/l3UcgEIw80eyb36kU/source.gif", "https://media1.giphy.com/media/xTiN0mN3wxWO0MDuGk/source.gif", "https://media2.giphy.com/media/3o6EhPDMjaDP5UC4ZW/source.gif", "https://66.media.tumblr.com/3b9394556e6e0c6271594be2339c5d21/tumblr_nqkmdcPzbd1qak30bo1_500.gifv"] var index = 0 function changeImage() { index = index < 0 ? kawaii.length - 1 : index; index = index === kawaii.length - 1 ? 0 : index; document.getElementById("imgid").src = kawaii[index]; index++; }; function goBackward() { changeImage(); } function goForward() { changeImage(); } 

 body { background-color: #a3d5d3; } 

 <h1>Image Gallery</h1> <img id="imgid"/><br> <input type="button" onclick="goBackward()" value="<<<<"/> <input type="button" onclick="goForward()" value=">>>>"/>