向视频添加 onclick 事件处理程序不起作用？

Question

出于某种原因，当我尝试向我页面上的所有视频添加 onclick 事件处理程序时，它不起作用。

(function(){
    var videos = document.getElementsByTagName("video");
    console.log(videos);
    console.log(videos.length);
    for(var i=0;i<videos.length;i++){
        videos[i].onclick = function(){
            console.log("aaa");
        }
    }
})();

当我首先 console.log() 变量 videos 时，控制台输出一个包含两个元素的 NodeList。但是当我 console.log() videos.length 时，控制台输出 0。因此，将 onclick 添加到视频中不起作用。可能是因为视频没有手动添加到页面？这是完整的 JS 代码：

(function(){
    var request = new XMLHttpRequest();
    request.open("GET","video_list.json",true);
    request.onload = function(){
        if(request.status == 200){
            updateVideoListDOM(request.responseText);
        }
    }
    request.send();
})();

(function(){
    var videos = document.getElementsByTagName("video");
    console.log(videos);
    console.log(videos.length);
    for(var i=0;i<videos.length;i++){
        videos[i].onclick = function(){
            console.log("aaa");
        }
    }
})();

function updateVideoListDOM(videoListObject){
    //video_list mora da bude u .json formatu, jer anonymous funkcija iznad ne vrsi konverziju
    var videoListArray = JSON.parse(videoListObject).videoListArray;
    for(var i = 0;i<videoListArray.length;i++){ 
        if(checkVideoExist(videoListArray[i])){
            var element = document.createElement("video");
            element.setAttribute("src",videoListArray[i]);
        }
        else{
            var element = document.createElement("p");
            element.innerHTML = "Sorry, the specified video doesn't exist.";
        }
        document.getElementById("videos").appendChild(element);
    }
}

function checkVideoExist(url){
    var request = new XMLHttpRequest();
    request.open("GET",url,true);
    request.send();
    return !(request.status == 404);
}

有什么解决办法吗？

Answer 1

您似乎尝试在创建视频元素之前将 onClick 事件处理程序添加到视频元素，您可以像这样在 updateVideoListDOM 函数中添加事件处理程序：

function updateVideoListDOM(videoListObject){
    //video_list mora da bude u .json formatu, jer anonymous funkcija iznad ne vrsi konverziju
    var videoListArray = JSON.parse(videoListObject).videoListArray;
    for(var i = 0;i<videoListArray.length;i++){ 
        if(checkVideoExist(videoListArray[i])){
            var element = document.createElement("video");
            element.setAttribute("src",videoListArray[i]);
        }
        else{
            var element = document.createElement("p");
            element.innerHTML = "Sorry, the specified video doesn't exist.";
        }
        element.onclick = function(){
            console.log("aaa");
        }
        document.getElementById("videos").appendChild(element);
    }
}

Answer 2

您的 XMLHttpRequest 是异步的，updateVideoListDOM 函数在您尝试设置 onclick 后被调用。

你应该这样命名你的函数：

function updateVideoOnClick() {
    var videos = document.getElementsByTagName("video");
    for(var i=0;i<videos.length;i++){
        videos[i].onclick = function(){
            console.log("aaa");
        }
    }
}

并在创建视频后调用此函数：

   ...
     document.getElementById("videos").appendChild(element);
    }
    updateVideoOnClick();
}

您还可以通过在创建视频时设置 onclick 事件来简化这一切：

...
var element = document.createElement("video");
element.setAttribute("src",videoListArray[i]);
element.onclick = function(){
    console.log("aaa");
}
...

这样您的视频就不会循环播放两次。

向视频添加 onclick 事件处理程序不起作用？

Adding an onclick event handler to videos doesn't work?

javascript

video

onclick

event-handling

dom-events