Cannot call method addEventListener() of null - even using jQuery DOM ready event

Question

I'm using jQuery for/with javascript in order to try to modify the inner HTML code of a div in the .htm file. I'm using jQuery DOM ready event as recommended here (http://stackoverflow.com/questions/9856140/javascript-uncaught-typeerror-cannot-call-method-addeventlistener-of-null) in order to avoid the script to be run before the div is ready, but that doesn't matter; I keep getting that error.

I must say it's just a few days since I'm into Javascript and it is a very long time since I last used HTML so please don't discard any noob-typical errors because most likely it may be that.

Here are the files I'm using, hosted in Skydrive:

AMPlayer.htm

playlister.js

As it can be guessed, I'm using videoJS as video player. The CSS and JS files of videojs can be referenced either online (http://videojs.com/#section5) or offline, as can be seen in AMPlayer.htm, but this is just circumstancial information since it looks more like a problem with javascript rather than a problem with videojs.

EDIT: What I think is the important part of the files:

AMPlayer.htm (I think the problem is here, so I'm pasting the whole file):

<!DOCTYPE html>
<html>

<head>
    <link href="video-js.css" rel="stylesheet" type="text/css">
    <script src="video-js.js"></script>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="playlister.js" type="text/javascript"></script>
    <title>AMPlayer</title>
</head>

<body>
    <div id="the-video" class="video-js-box">
            <span>&nbsp;</span>
        </div>
</body>

</html>

playlister.js:

function postVideo()
{

    getNextVideo();
    document.write("NEXT VIDEO: "+videoNames[iNewVideoId]+"<br>");
    var video1 = '<video id="AMPlayer" class="video-js vjs-default-skin" preload="auto" width="650" height="365" data-setup="{}" autoplay> <source src="videos/AVANCE/vid.mp4" type="video/mp4" /><source src="videos/AVANCE/vid.webm" type="video/webm" /></video>';

    //document.write(video1); This writes the text so the video is played, but it drives me to an undesired behaviour
    document.write("BEFORE THE .SETUP<br>");
    //$("#the-video").html(video1); This doesn't work
    //document.getElementById("the-video").innerHTML=video1; This does neither work
    //window.VideoJS.setup($'video1'));
    document.write("AFTER THE .SETUP<br>");
    document.getElementById("AMPlayer").addEventListener('ended', postVideo, true);
    //$(".video-js")[0].player.play();
    document.write("AFTER THE .PLAY<br>");
    //postVideo();
}

Any provided help will be very useful for sure. Thanks in advance.

Why don't you paste the relevant code *here*? – Alvin Wong Jul 20 '12 at 10:32 — Alvin Wong, Jul 20 '12 at 10:32
@AlvinWong done. sorry didn't even thought about it. – Jorge Antonio Díaz-Benito Jul 20 '12 at 10:44 — Jorge Antonio Díaz-Benito, Jul 20 '12 at 10:44

score 3 · Accepted Answer · answered Jul 20 '12 at 10:46

3

You are trying to get the element with the id AMPlayer, but you don't have one.

You have a string containing the HTML to create one, but it hasn't been added to the DOM.

answered Jul 20 '12 at 10:46

Quentin

800,325
104
1,079
1,205

then shouldn't uncomment the `$("#the-video").html(video1);` line solve the problem? But it makes no change. – Jorge Antonio Díaz-Benito Jul 20 '12 at 16:05
What do you mean when you say `$("#the-video").html(video1);` doesn't work? Does it add the html to the DOM? (it should) – radixhound Jul 20 '12 at 22:47

Cannot call method addEventListener() of null - even using jQuery DOM ready event

1 Answers1