向視頻添加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

似乎您嘗試在創建video元素之前將onClick事件處理程序添加到video元素，您可以將事件處理程序添加到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");
}
...

這樣您就不會在視頻上循環播放兩次。