Uncaught TypeError: Cannot set property 'innerHTML' of null at playMusic报错如何解决

报错根本原因 #

你触发空值报错的核心有两个：

• 你已经通过wrapper.querySelector('.fa-play')选中了<i>标签元素本身，后续在playMusic函数里调用playPauseBtn.querySelector('i')是试图在<i>标签内部查找子级<i>标签，DOM中不存在该元素，返回null，对null设置innerHTML就会触发当前报错。
• pauseMusic函数里使用的musicPlayPauseBtn变量未定义，你全局声明的按钮变量名是playPauseBtn，变量名拼写错误也会触发空值报错。

除此之外你的代码还有两处逻辑错误，会导致即使解决报错也无法实现预期的播放暂停切换效果：

• Font Awesome图标依靠类名切换样式，修改innerHTML无法实现图标切换
• 播放状态判断逻辑写反，且给wrapper加fa-play类的标记方式不符合逻辑
• 原代码遗漏了wrapper、musicAudio两个核心变量的定义，执行也会报错

修复后的完整代码 #

HTML（无需修改） #

<div class="wrapper">
     <div class="pause">
          <i id="played" class="fas fa-play"></i>
     </div>
</div>

JavaScript（已修复所有问题） #

// 补充wrapper变量定义，原代码遗漏该声明
const wrapper = document.querySelector('.wrapper')
const playPauseBtn = wrapper.querySelector('.fa-play')
// 补充audio元素定义，按实际需求替换音频地址即可
const musicAudio = new Audio('你的音频文件地址.mp3')

function playMusic(){
  // 切换图标类名实现样式变化
  playPauseBtn.classList.remove('fa-play')
  playPauseBtn.classList.add('fa-pause')
  musicAudio.play();
}

function pauseMusic(){
  // 切换图标类名实现样式变化
  playPauseBtn.classList.remove('fa-pause')
  playPauseBtn.classList.add('fa-play')
  musicAudio.pause();
}

playPauseBtn.addEventListener('click', ()=>{
  // 直接通过按钮类名判断当前播放状态
  const isPaused = playPauseBtn.classList.contains('fa-play')
  isPaused ? playMusic() : pauseMusic();
})

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