为视频添加onclick事件处理程序是行不通的
Adding an onclick event handler to videos doesn't work?
由于某种原因,当我尝试将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);
}
解决方案吗?
您的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事件处理程序到视频元素之前,你创建视频元素,你可以只是在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);
}
}
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- keyup事件处理程序更改焦点不适用于快速键入
- 用程序搜索JQuery数据表中的文本
- Javascript:selenium Web驱动程序isDisplayed()不工作
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- Emberjs应用程序加载在除Index之外的所有路由上
- ExtJS 5用程序点击actioncolumn gridview
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 如何从Java/scala调用js美化程序
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- angular 1.5应用程序中的导航栏
- YUI3 IO实用程序是否可以根据给定的内容类型标头值自动序列化数据
- 如何创建带有插槽的vue js组件预加载程序
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 在Windows 10中自动执行例行程序(主要与浏览器交互)
- 在Web应用程序中使用Highcharts javascript
- 递归使用 eval() 是检查程序执行的好方法吗?
- 为视频添加onclick事件处理程序是行不通的
- 将JavaScript代码从c# windows应用程序发送到正在运行的IE实例是行不通的