Question

它显示问题“Uncaught TypeError：check.addEventListener不是函数”。当我点击其中一个视频时，如果我点击另一个视频，该课程将从第一个点击的视频中自动删除并在最近点击的视频上添加课程，我试图做什么。 PLZ任何身体帮助也检查是否有任何CSS属性问题，并通过我的问题来解决问题

这是我的Html文件

<!DOCTYPE html>
<html>
<head>
    <title>test video</title>
    <style type="text/css">
        video{
            width: 300px;
            transition: .5s;
        }

        .vid{
            width: 500px;
            transition: .5s;
        }
    </style>

</head>
<body>

    <video class="videoElementID" controls
    poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
    <source src="C:\Users\Narayan Maity\Desktop\huhuuu\pehle pehle kabhi toh gam tha.mp4" type="video/mp4">
    </video>
    <video class="videoElementID" controls
    poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
    <source src="C:\Users\Narayan Maity\Desktop\huhuuu\pehle pehle kabhi toh gam tha.mp4" type="video/mp4">
    </video>
    <video class="videoElementID" controls
    poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
    <source src="C:\Users\Narayan Maity\Desktop\huhuuu\pehle pehle kabhi toh gam tha.mp4" type="video/mp4">
    </video>
    <video class="videoElementID" controls
    poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
    <source src="C:\Users\Narayan Maity\Desktop\huhuuu\pehle pehle kabhi toh gam tha.mp4" type="video/mp4">
    </video>
    <video class="videoElementID" controls
    poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
    <source src="C:\Users\Narayan Maity\Desktop\huhuuu\pehle pehle kabhi toh gam tha.mp4" type="video/mp4">
    </video>
    <video class="videoElementID" controls
    poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
    <source src="C:\Users\Narayan Maity\Desktop\huhuuu\pehle pehle kabhi toh gam tha.mp4" type="video/mp4">
    </video>
    <video class="videoElementID" controls
    poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
    <source src="C:\Users\Narayan Maity\Desktop\huhuuu\pehle pehle kabhi toh gam tha.mp4" type="video/mp4">
    </video>
    <video class="videoElementID" controls
    poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
    <source src="C:\Users\Narayan Maity\Desktop\huhuuu\pehle pehle kabhi toh gam tha.mp4" type="video/mp4">
    </video>

    <script
      src="http://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous">      
    </script>
    <script type="text/javascript" src="test.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.videoElementID').bind('contextmenu',function() { return false; });
        });
    </script>

</body>
</html>

这是我的test.js或javascript文件

var check = document.querySelectorAll("video");   

check.addEventListener("click",cheesy());

function cheesy() {

    for (var i = 0; i < check.length; i++) {
        check[i].classList.remove("vid");
    }
    check.className += 'vid';
};

Answer 1

您应该循环每个视频元素并添加click事件监听器

var check = document.querySelectorAll("video");   
for (var i = 0; i < check.length; i++) {
    check[i].addEventListener("click",cheesy);
}

function cheesy() {

    for (var i = 0; i < check.length; i++) {
        check[i].classList.remove("vid");
    }
    check.className += 'vid';
};

Answer 2

querySelectorAll返回NodeList（节点数组）。查看docs。

您可能希望将事件侦听器添加到每个节点。

var checks = document.querySelectorAll("video"); 

Array.prototype.forEach.call(checks, function(item) {
   item.addEventListener("click",cheesy);
});

Answer 3

在您的示例中，由于执行函数chessy()而传递值。您需要做的是将引用传递给您的处理函数，如下所示。

＆＃13;

check.addEventListener("click",cheesy);

＆＃13;

未捕获的TypeError：check.addEventListener不是函数

这是我的Html文件

这是我的test.js或javascript文件

3 个答案: