How do I dynamically populate a page with divs with onClick functions that modify an HTML5 video player?

As the overly specific title makes clear, I'm trying to use javascript to dynamically add divs to a page (based on how many videos I have to load for the HTML5 media player) and I want each of the divs to have a separate onclick function that changes the source of the media player.

I've gotten the page to dynamically add divs, but the divs do not have onClick functions despite me assigning them during the creation process. After some (read: a lot) of googling, I found that the problem is I can only reference a function, not put specific code in an onClick event (I think?) So, I changed up the code, and now I have this:

<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)开发者_如何学Python);  
    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>  

So, what that outputs is simply the media player, and no divs at all.

Any help would be greatly appreciated. I feel like I'm missing something extremely obvious, but no amount of searching is helping me to find the error I'm making.

The onclick attribute is spelled with a lowercase 'c'. That might be your problem.

But the W3C model for registering events is to use addEventListener instead of assigning to the onclick attribute. This tutorial shows how. I would use that model for better portability (or better yet, use jQuery which takes care of all the portability concerns).

Edit: Oh yes, and as you said in the question (but didn't reflect in the code), you need to assign a function (whether you use onclick or addEventListener), not a string containing code. So where you have:

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

instead, use:

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

or:

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

or best yet (most portable), using jQuery (requires that you import that library):

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

This is much easier to avoid making a mistake, since you don't need to concatenate strings and form your own JavaScript syntax: note that in the string version you would need to quote toWrite and escape any special characters, which isn't needed in the function version.