javascript - 为什么我一直收到 .addEventListener is not a function？

Question

这个问题已经有答案了:

What do querySelectorAll and getElementsBy* methods return? (12 个回答)

已关闭 4 年前。

所以我正在使用 JW Player，除了我正在开发的一项功能之外，一切都运行良好。当我运行代码时，我收到控制台错误:未捕获类型错误:upTop.addEventListener不是函数n

代码如下:

                var upTop = document.getElementsByClassName('playlist-item');

                upTop.addEventListener('click', function() {
                jwplayer.setup({autostart: true, floating: {dismissable: true}});
                       window.scrollTo(0, 0);
                });

我这里缺少某种语法错误吗？

Answer 1

调用 getElementsByClassName 的工作方式与 getElementById 不同。多个元素可以具有相同的类名，因此返回的是一个数组。例如，如果您希望返回第一项，因为您知道该类只有一个元素，则

var upTop = document.getElementsByClassName('playlist-item')[0];

就足够了。否则，您可以循环遍历 upTop 中的所有项目并向所有项目添加事件监听器。纯 JS 中:

for (var i=0; i < upTop.length;i++) {
 upTop[i].addEventListener('click', function() {
    wplayer.setup({autostart: true, floating: {dismissable: true}});
    window.scrollTo(0, 0);
 });
}