JavaScript使用列表修改h1内容的代码错误排查

DevOps 小满

2026-8-30

代码错误排查

你的代码存在多处语法与逻辑错误，具体问题点如下：

类选择器写法错误：swiper-button-next是元素class属性值，使用querySelector匹配类名必须添加.前缀，现有写法会尝试匹配标签名为swiper-button-next的元素，无法选中目标按钮
变量命名非法：JavaScript变量名不允许包含中划线-，name-index、name-list的写法会被解析为减号运算，直接触发语法报错，建议改用驼峰命名规则，例如nameIndex、nameList
数组定义语法错误：定义数组需先声明变量，再通过=完成赋值，现有name-list[xxx]的写法既无变量声明也无赋值符号，不符合JS语法规范
标签闭合错误：代码末尾的<script>、<html>均为开标签，应替换为对应的闭合标签</script>、</html>
赋值逻辑错误：将name-list[name-index].name包裹在双引号中时，JS会将其识别为固定字符串，不会读取变量存储的实际值
缺少索引切换逻辑：初始索引固定为0，没有点击后自增的逻辑，无法实现点击切换内容的效果
缺少边界判断：索引增长超过数组长度后会读取到undefined，需要增加索引重置逻辑避免异常

修正后可运行代码

<html> 
<body>
    <h2 id="demo">Example H</h2>
    <div class="swiper-button-next">下一个</div>
</body>
<script> 
// 类选择器添加.前缀
const next = document.querySelector(".swiper-button-next");
// 驼峰命名变量
let nameIndex = 0;
// 正确声明并赋值数组
const nameList = [
  {
    name: 'John'
  },
  {
    name: 'Christina'
  }
];
next.addEventListener('click', myFunction)
function myFunction() {
  // 纯文本赋值优先用textContent，变量不要加引号
  document.getElementById("demo").textContent = nameList[nameIndex].name;
  // 索引自增，到数组末尾后重置为0循环展示
  nameIndex = (nameIndex + 1) % nameList.length;
}
</script>
</html>