JavaScript点击按钮切换数组内图片无法正常显示怎么解决

问题原因 #

你的代码存在两个核心逻辑错误，导致点击后无法正常加载图片：

• 边界判断逻辑完全错误：next() 函数中只要current大于等于0，就直接将current赋值为数组长度再自增，数组有效索引范围是0 ~ 数组长度-1，赋值后的current直接超出索引范围，读取到的是undefined
• 路径取值错误：你的images数组中存储的是直接的图片路径字符串，不是带src属性的对象，不需要加.src取值

修复后可用代码 #

JS 代码： #

var images = ["/aboutmepages/imagesAM/SSR.jpeg", "/aboutmepages/imagesAM/ATA.png",
  "/aboutmepages/imagesAM/BC.jpg", "/aboutmepages/imagesAM/GCU.jpg"
];

var current = 0; // 当前展示的图片索引
var change_img = document.getElementById("placeholder");

function next() {
  // 索引自增，到最后一张后自动回到第一张实现循环效果
  current = (current + 1) % images.length;
  // 直接赋值路径字符串即可
  change_img.src = images[current];
}

HTML 代码无需修改，保持原有逻辑即可： #

<img src="/aboutmepages/imagesAM/SSR.jpeg" id="placeholder">
<div id="display">
    <button class="button" onclick="next()">Next Image</button>
</div>  

如果修改后仍存在加载异常，可打开浏览器控制台检查对应图片路径是否返回404，确认路径拼写是否正确即可。

内容的提问来源于stack exchange，提问作者Jonathon Duran Jr.