网站播放/暂停按钮切换功能失效，Codepen正常，求排查方案

以下是导致播放/暂停图标切换失效的核心问题及修复方法：

• 类选择器语法错误
  你在document.querySelector中写的选择器.fa-solid fa-solid1 fa-2x fa-circle-play是错误的——多个类选择器需要用.连接（表示元素同时拥有这些类），空格分隔是后代选择器的语法。正确写法：

  const el = document.querySelector('.fa-solid.fa-solid1.fa-2x.fa-circle-play');
  

  更稳妥的方式是给播放按钮加一个唯一标识类（比如play-pause-btn），避免依赖图标类选择元素，减少样式变更带来的问题。

• HTML存在重复class属性
  音量按钮标签里写了两个class属性，浏览器只会识别第一个，第二个会被忽略。需要合并成一个：

  <i class="fa-solid fa-solid1 fa-2x fa-volume-high audio-player-volume-button" data-volume="up"></i>
  

• 事件绑定冲突 + 未定义函数
  播放按钮同时用了addEventListener绑定changeClass，又在HTML里写了onclick="togglePlay()"，但你没定义togglePlay函数，这会触发控制台报错，阻塞changeClass执行。建议移除HTML里的onclick属性，只保留一种事件绑定方式。

• JS执行时机问题
  如果JS代码写在<head>里，会在DOM元素加载完成前执行，此时document.querySelector找不到目标元素，el为null，无法绑定事件。解决方法二选一：

  1. 把JS代码放在<body>最底部；
  2. 用DOMContentLoaded事件包裹代码：

     document.addEventListener('DOMContentLoaded', function() {
       const el = document.querySelector('.play-pause-btn');
       el.addEventListener('click', changeClass);
     });
     

• 冗余图标类
  标签里重复的fa-solid fa-solid1大概率是笔误，保留fa-solid即可（适配Font Awesome 6）。

修复后完整代码示例 #

HTML

<div class="playercontent">
  <div class="playercenter">
    <i class="fa-solid fa-2x fa-volume-high audio-player-volume-button" data-volume="up"></i>
    &nbsp;
    <i class="fa-solid fa-2x fa-circle-play play-pause-btn"></i>
  </div>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const el = document.querySelector('.play-pause-btn');
  
  el.addEventListener('click', function() {
    // 用toggle简化类切换逻辑
    el.classList.toggle('fa-circle-play');
    el.classList.toggle('fa-circle-pause');
  });
});

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