向视频添加 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

您的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");
}
...

这样你就不会在视频中循环两次了

Answer 2

似乎你尝试添加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);
    }
}