38

Althought I pushed a parameter to getElementById I wonder from where is this 'is null' error coming from? 

TypeError: document.getElementById(...) is null
[Break On This Error]   

document.getElementById(elmId).innerHTML = value;

Line 75

In addition to this i wonder why title and time did not show unless I click one of these playlist pictures?

mcan
  • 1,914
  • 3
  • 32
  • 53
  • 1
    Check which ids are passed as elmId and make sure that elements with that id exist on your page. From, what I see, you are missing several elements. – asleepysamurai Dec 14 '12 at 20:14

8 Answers8

76

Make sure the script is placed in the bottom of the BODY element of the document you're trying to manipulate, not in the HEAD element or placed before any of the elements you want to "get".

It does not matter if you import the script or if it's inline, the important thing is the placing. You don't have to put the command inside a function either; while it's good practice you can just call it directly, it works just fine.

Olemak
  • 2,005
  • 1
  • 17
  • 20
37

All these results in null:

document.getElementById('volume');
document.getElementById('bytesLoaded');
document.getElementById('startBytes');
document.getElementById('bytesTotal');

You need to do a null check in updateHTML like this:

function updateHTML(elmId, value) {
  var elem = document.getElementById(elmId);
  if(typeof elem !== 'undefined' && elem !== null) {
    elem.innerHTML = value;
  }
}
melMass
  • 3,813
  • 1
  • 31
  • 30
bits
  • 8,110
  • 8
  • 46
  • 55
14

It means that the element with the id passed to getElementById() does not exist.

Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52
10

You can use JQuery to ensure that all elements of the documents are ready before it starts the client side scripting

$(document).ready(
    function()
    {
        document.getElementById(elmId).innerHTML = value;
    }
);
xxbbcc
  • 16,930
  • 5
  • 50
  • 83
amar
  • 101
  • 1
  • 2
4

I got the same error. In my case I had multiple div with same id in a page. I renamed the another id of the div used and fixed the issue.

So confirm whether the element:

  • exists with id
  • doesn't have duplicate with id
  • confirm whether the script is called
Pradeep Kumar
  • 4,065
  • 2
  • 33
  • 40
3

I have same problem. It just the javascript's script loads too fast--before the HTML's element loaded. So the browser returning null, since the browser can't find where is the element you like to manipulate.

The Mr. Totardo
  • 1,119
  • 2
  • 10
  • 11
2

In your code, you can find this function:

// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
  document.getElementById(elmId).innerHTML = value;
}

Later on, you call this function with several params:

updateHTML("videoCurrentTime", secondsToHms(ytplayer.getCurrentTime())+' /');
updateHTML("videoDuration", secondsToHms(ytplayer.getDuration()));
updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
updateHTML("startBytes", ytplayer.getVideoStartBytes());
updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
updateHTML("volume", ytplayer.getVolume());

The first param is used for the "getElementById", but the elements with ID "bytesTotal", "startBytes", "bytesLoaded" and "volume" don't exist. You'll need to create them, since they'll return null.

MarcoK
  • 6,090
  • 2
  • 28
  • 40
1

Found similar problem within student's work, script element was put after closing body tag, so, obviously, JavaScript could not find any HTML element.

But, there was one more serious error: there was a reference to an external javascript file with some code, which removed all contents of a certain HTML element before inserting new content. After commenting out this reference, everything worked properly.

So, sometimes the error might be that some previously called Javascript changed content or even DOM, so calling for instance getElementById later doesn't make sense, since that element was removed.

Mladen Janjic
  • 117
  • 2
  • Putting a script element after `

    ` should trigger error correction that inserts it into the DOM just before `` and either way, it should still be after everything else in the document and able to find any elements *in* the document.

     – Quentin Feb 04 '20 at 14:39
  • Sorry, found another error, too, external JS referenced before script element with the code I thought had some problem was messing with HTML content. In fact, student should have added code to the linked external JS file instead adding new script element. Just changed original comment to reflect this. – Mladen Janjic Feb 04 '20 at 15:03