Question

由于过于具体的标题清楚，我正在尝试使用javascript动态地将div添加到页面（基于我必须为HTML5媒体播放器加载多少视频）并且我希望每个div都有一个单独的onclick功能，可以改变媒体播放器的来源。

我已经获得了动态添加div的页面，但是div尽管我在创建过程中分配了它们，但没有onClick函数。经过一些（阅读：很多）谷歌搜索，我发现问题是我只能引用一个函数，而不是在onClick事件中放入特定的代码（我想？）所以，我更改了代码，现在我有了这个：

<video name = "myVideo" style = "width: 500px; height: 300px" id = "player" controls = "controls" autoplay = "autoplay">  
<source name = "VidSource" src = 'video.mp4'>  
<source name = "VidSource" src = 'video2.webm'>  
</video><br><br><br>  


<script type = "text/javascript">  
var sourceName = document.getElementsByName("VidSource");  

for (x = 0; x< sourceName.length; x = x+1)  
{  
    var stringToSend = sourceName[x].src;  
    var substringint = stringToSend.lastIndexOf("/");  
    stringToSend = stringToSend.substring((substringint + 1));  
    createDiv("Div" + x, 250, 40, stringToSend);  

    document.write("<br>");  
}  

function createDiv(id, width, height, toWrite)  
{  
    var newdiv = document.createElement('div');   
    newdiv.id = id;  
    newdiv.style.width = width;  
    newdiv.style.height = height;  
    newdiv.style.overflow = "auto";  

    newdiv.style.background = "#FF0000";  
    newdiv.style.border = "2px solid #FFFFFF";  

    var substringint = toWrite.lastIndexOf("/");  
    toWrite = toWrite.substring((substringint + 1));  

    newdiv.innerHTML = " <center> " + toWrite + "</center>";  
    newdiv.onClick = "changeSrc(" + toWrite ");";   
    document.body.appendChild(newdiv);  
}  

function changeSrc(src)  
{  
    document.myVideo.src = src;  
    video.load();  
    video.play();  
}  


</script>

所以，输出的只是媒体播放器，根本没有div。

非常感谢任何帮助。我觉得我错过了一些非常明显的东西，但没有多少搜索能帮助我找到我正在犯的错误。

Answer 1

具有小写“c”的onclick属性is spelled。那可能是你的问题。

但注册事件的W3C model是使用addEventListener而不是分配给onclick属性。 This tutorial显示了如何。我会使用该模型以获得更好的可移植性（或者更好的是，使用jQuery来处理所有可移植性问题。）

编辑：哦，是的，正如您在问题中所说的那样（但未反映在代码中），您需要分配功能（无论您使用onclick或addEventListener），而不是包含代码的字符串。所以你在哪里：

newdiv.onClick = "changeSrc(" + toWrite ");";

相反，请使用：

newdiv.onclick = function() { changeSrc(toWrite); };

或：

newdiv.addEventListener("click", function() { changeSrc(toWrite); }, false);

或最好（最便携），使用jQuery（要求您导入该库）：

$(newdiv).click(function() { changeSrc(toWrite); });

这更容易避免出错，因为您不需要连接字符串并形成自己的JavaScript语法：请注意，在字符串版本中，您需要引用toWrite并转义任何特殊字符，在功能版本中不需要。

如何使用修改HTML5视频播放器的onClick函数动态填充带有div的页面？

1 个答案: