JavaScript点击elefant.png切换scale系列图片出现undefined如何解决

• 你的gallery数组仅有4个元素，合法索引范围是0~3，对应scale2.png到scale5.png共4张图片，加上初始默认显示的scale1.png刚好是你说的5张scale系列图
• 当前函数执行逻辑是先读取gallery[counter]赋值给图片src，再对counter做自增和判断，当counter自增到4之后，下一次点击会直接读取不存在的gallery[4]，才会走后续的判断逻辑，自然就出现undefined
• 现有的判断逻辑仅修改了标题文本，没有限制counter继续增长，也没有阻止后续的图片赋值操作

把索引合法性判断提前，点击时先判断counter是否还在数组合法索引范围内，只有符合条件才执行图片切换逻辑，修复后的完整JS代码如下：

var counter = 0,
gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"],
imagefun = function () {
    // 索引超出数组范围就直接终止函数执行，不再切换图片
    if (counter >= gallery.length) {
        return;
    }
    document.getElementById("getImage").src = gallery[counter];
    counter++;
    if (counter >= gallery.length) {
        document.getElementById("title_text").innerHTML = "New text!";
    }
};

这里用gallery.length代替硬编码的数值4，后续如果增减gallery里的图片不用同步修改判断数值，兼容性更好。

内容的提问来源于stack exchange，提问作者daydreamer