JavaScript实现图片切换时描述文本不同步更新如何解决？

问题根因 #

你给描述文本赋值的写法错误，innerHTML 是DOM元素的内置属性，不是HTML标签属性，不能用setAttribute()方法赋值，这是导致描述不更新的核心原因。

修复方案 #

1. 把给描述赋值的行改成直接操作innerHTML属性即可，同时你完全不需要维护两个独立的索引变量，图片和描述是一一对应的，共用一个索引即可，避免后续出现图文不匹配的问题。
2. 另外你当前的执行顺序也存在小问题：初始状态已经默认展示了第一张图和对应描述，第一次点击应该直接切换到第二张，你现在是先赋值再修改索引，会导致第一次点击没有生效，建议调整顺序。

修复后的JS代码如下：

var theimages = ["Images/Cordoba.jpg", "Images/delorean.jpeg", "Images/duster.jpg", "Images/FuryIII.jpg", "Images/laser.jpg", "Images/Monaco.jpg", "Images/mustang.jpg", "Images/Newport.jpg", "Images/Satellite.jpg", "Images/Scamp.jpg"];
var imageinfo = ["This is a 1977 Chrysler Cordoba", "This is a 1982 DMC-12 Delorean", "This is a 1974 Plymouth Gold Duster", "This is a 1974 FuryIII", "This is a 1984 Chrysler Laser", "This is a 1975 Dodge Monaco", "This is a 1976 Ford Mustang", "This is a 1978 Chrysler Newport", "This is a 1972 Plymouth Satellite", "This is a 1972 Plymouth Scamp"];

var myImage = document.getElementById("carpicholder");
var myImageDesc = document.getElementById("carinfo");
var index = 0;

function NextImage() {
  // 先修改索引，第一次点击直接切到第二张
  index = (index + 1) % theimages.length;
  myImage.setAttribute("src", theimages[index]);
  // 直接操作innerHTML属性，不要用setAttribute
  myImageDesc.innerHTML = imageinfo[index];
}

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