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是异步的，在您尝试设置onclick后会调用updateVideoListDOM函数。

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

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事件处理程序并不起作用？

2 个答案: