Question

I want to call a function onclick (which I know works) then load it into the page:

I’m trying to create a video element in HTML5 including some attributes for it.

I know it works because I tested it with the following alert:

alert("createSmallVideo has been called");

I’ve commented the alert now and I know the function is being called but why isn’t the video being displayed on the web page:

function createSmallVideo(){
    //alert("createSmallVideo has been called");

    var video = document.createElement("video");

    video.setAttribute("id", "VideoElement");
    video.setAttribute("src", "videos/small.ogv");
    video.setAttribute("controls", "controls");
    video.setAttribute("preload", "auto");
    document.getElementById("#VideoContainer").appendChild(video);
}

What am I doing wrong? Please help!

Answer 1

Because there is no element on your page with an id of #VideoContainer (or if there is there shouldn’t be). An element Id cannot contain a #. If you open your JavaScript console you’ll probably find a null reference error message. Try removing the # from your call to document.getElementById().