为什么这些函数不能用于在数组中显示我的图像？

Question

我是 JavaScript 的初学者，我似乎无法让我的代码工作。 我有这个早就应该完成的任务，我似乎无法让 goForward() ">>>" 和 goBackward() "<<<" 函数正常工作。 它应该从索引开始，每次单击“>>>”按钮时，它都会显示数组中的下一个图像。 “<<<”按钮相同。 我的阵列中有 5 张图像，“>>>”显示 4 张图像，然后返回到第 1 张图像。 “<<<”只是坏了。 有时它会显示上一张图片，然后跳到第 5 张图片。 在那之后，它就行不通了。 有些东西坏了，我无法弄清楚。 请帮忙！！ 这是我的代码https://codepen.io/oshitaiya/pen/mddNWaq enter code here 。 这是我的作业要求https://docs.google.com/document/d/12IcETUGbgxC4jKBs0BK8HHLrjB_35mVlqK1kGTVIg-Y/edit?usp=sharing

Answer 1

通过保留你所拥有的。 在追加之前运行所有逻辑。

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

我已经通过将两个函数替换为changeImage函数来编辑了您的代码。

 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=">>>>"/> 

---

或者，如果您想保留两个功能：

 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=">>>>"/>