点击next/prev按钮切换元素className的JS代码不生效问题求助

问题原因及修复方案 #

存在的错误点

• 方法名拼写错误：document.getElementByClassName 应为 document.getElementsByClassName，该方法返回类数组集合，需通过索引[0]取匹配的第一个元素
• 字符串replace方法特性：replace不会修改原字符串，仅返回替换后的新结果，需将结果重新赋值给className属性才会生效
• 事件绑定错误：HTML中onclick属性值需要加括号触发函数执行，当前onclick="plusSlides"只会引用函数不会执行
• 元素引用固定问题：初始就固定获取三个元素的引用，第一次修改类名后，后续执行函数时变量指向的元素不会对应最新的类名状态，需每次执行函数时重新获取对应类名的元素

修正后代码

JavaScript部分

function plusSlides() {
  // 每次执行函数时重新获取当前对应类名的元素
  const photoOne = document.getElementsByClassName("photo1")[0];
  const photoTwo = document.getElementsByClassName("photo2")[0];
  const photoThree = document.getElementsByClassName("photo3")[0];
  // 替换后重新赋值给className
  photoOne.className = photoOne.className.replace("photo1", "photo2");
  photoTwo.className = photoTwo.className.replace("photo2", "photo3");
  photoThree.className = photoThree.className.replace("photo3", "photo1");
}

function backSlides() {
  const photoOne = document.getElementsByClassName("photo1")[0];
  const photoTwo = document.getElementsByClassName("photo2")[0];
  const photoThree = document.getElementsByClassName("photo3")[0];
  photoOne.className = photoOne.className.replace("photo1", "photo3");
  photoTwo.className = photoTwo.className.replace("photo2", "photo1");
  photoThree.className = photoThree.className.replace("photo3", "photo2");
}

HTML按钮部分

<a class="prev" onclick="plusSlides()"><</a>
<a class="next" onclick="backSlides()">></a>

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