ES6/ES7中HTML按钮切换selected类报错排查

嘿，我来帮你排查问题并搞定它！你遇到的Uncaught TypeError是因为代码里的数组操作逻辑有问题，咱们一步步拆解：

错误原因分析 #

1. push()的返回值不是数组
   在你的else分支里，你写了：

   this.className = this.className.split(' ').push('selected').join(' ');
   

   split(' ')会把类名字符串转成数组，但push()方法的返回值是数组的新长度（比如原来数组有1个元素，push后长度变成2，就返回数字2），而不是修改后的数组。你接着对数字调用join(' ')，自然会报错——数字没有join方法！

2. pop()不能精准移除指定类
   你的if分支用pop()来删除selected类，但pop()只会删除数组的最后一个元素，如果类名顺序变了（比如按钮有多个类，selected不是最后一个），就会误删其他类，逻辑完全不对。

两种解决方案 #

方案一：用classList.toggle()（推荐，简洁可靠） #

浏览器原生提供了classList API，专门用来操作元素的类名，toggle方法可以一键切换类的存在状态——有就移除，没有就添加，完美匹配你的需求：

window.onload = function() {
  const btns = document.getElementsByTagName('button');
  for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
      this.classList.toggle('selected');
      console.log(this.className);
    });
  }
}

这个写法既简洁，又避免了手动处理字符串和数组的各种坑，是现在操作类名的标准方式。

方案二：手动修正数组操作（适合理解底层逻辑） #

如果你想手动实现类名的切换，需要先把数组存起来，再进行操作，最后再转成字符串：

window.onload = function() {
  const [...btns] = document.getElementsByTagName('button');
  for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
      // 拆分类名并过滤空字符串（避免多个空格导致的空元素）
      const classArr = this.className.split(' ').filter(cls => cls);
      const selectedIndex = classArr.indexOf('selected');
      
      if(selectedIndex > -1) {
        // 精准移除selected类
        classArr.splice(selectedIndex, 1);
      } else {
        // 添加selected类
        classArr.push('selected');
      }
      
      // 把数组转回字符串赋值给className
      this.className = classArr.join(' ');
      console.log(this.className);
    });
  }
}

这里用splice()代替pop()来精准移除指定索引的类，同时先把数组存到变量里，操作完再join成字符串，就不会出现之前的错误了。

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