Question

我正在尝试用 javascript 制作音乐播放器，但遇到了问题。每次我运行代码时，它都会在最后三行代码中显示此错误。错误：index.js:12 未捕获的类型错误：无法读取 null 的属性“addEventListener” 在 index.js:12

谁能帮我调试一下这个东西？

document.querySelector(".play-button").addEventListener("click", function (){
  document.querySelector(".play-button").classList.add("fa-pause")
   document.querySelector(".play-button").classList.remove("fa-play")

   var icare= new Audio("songs/i don't care.mp3")
   icare.play();

})

document.querySelector("fa-pause").addEventListener ("click", function(){
  icare.pause()
})

Answer 1

即使修正了错别字，代码仍然有问题。看，这一行...

document.querySelector('.fa-pause').addEventListener ("click", /* ... */)

... 无法“预测”DOM 的未来修改并为这些修改设置侦听器。相反，querySelector 什么也没找到（因为没有 fa-pause 类 yet 的元素），返回 null，然后抛出 TypeError。

尽管如此，即使它工作正常，您仍然会遇到问题，因为它是同一个元素 - .play-button - 同时侦听“播放”事件和“暂停”事件。

这里一种可能的解决方法是只使用一个事件侦听器，根据元素的状态做不同的事情。但这还不是全部：icare 变量应该在事件侦听器的外部，否则它不会被持久化。

以下是解决调用的方法（出于明显的原因，我更改了音频网址）：

const icare = new Audio(
  'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3');
document.querySelector(".play-button").addEventListener("click",
  function() {
    const playButton = this;
    const playButtonClassList = playButton.classList;
    if (playButtonClassList.contains('fa-play')) { // ... handle play
      icare.play();
    } else { // ... already playing, handle pause
      icare.pause();
    }
    playButtonClassList.toggle('fa-play');
    playButtonClassList.toggle('fa-pause');
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<i class="play-button fa fa-play" aria-hidden="true"></i>

我无法向对象添加事件侦听器

1 个答案: