未捕获的TypeError：playlist.querySelector不是函数

Question

当用户单击缩略图img链接之一时，我试图将页面上的主视频更改为另一视频。

基本上，该代码应该：

• 获取每个视频播放列表（如果有1个或更多）
• 抓住每个播放列表的视频标签和源标签
• 循环浏览所有视频链接
• 在每个链接上添加一个点击侦听器，以获取我添加的data-video-src属性，并将其应用于视频源
• 加载视频。

以下是HTML： This is the HTML code

下面是JavaScript，但是当我运行它时，我得到：

  

“未捕获的TypeError：playlist.querySelector不是函数”

我在做什么错了？：

ChangeVideo.js

Answer 1

问题是因为...中的播放列表具有播放列表作为数组的索引。

尝试

var playlists = document.querySelectorAll('.video-playlist');
for (var i = 0; i < playlists.length; i++) {
  var playlist = playlists[i];
  ...
});

，内部for循环也需要更改。

谢谢

Answer 2

您正在做 for(playlist in document.querySelectorAll('.video-playlist'))会将playlist的值设置为document.querySelectorAll('.video-playlist')的键的值。而且由于document.querySelectorAll('.video-playlist')是数组类型，所以键将是0，1和2，依此类推。因此，playlist的数值为0，1，2，... playlist.querySelector会给您带来错误

  

“未捕获的TypeError：playlist.querySelector不是函数”

要解决此问题，您需要选择document.querySelectorAll('.video-playlist')的每个元素，而不是其index。为此，您需要更改for循环以使用of而不是

的in

for(playlist of document.querySelectorAll('.video-playlist'))

在of循环中使用for时，它将把document.querySelectorAll('.video-playlist')的每个元素分配给playlist。并且当您在playlist中获得元素时，函数querySelector将有效。