document.getElementByID("test").innerHTML giving TypeError: 'undefined' is not a function (evaluating 'document.getElementByID("test")')

Question

I am trying to use javascript to set the inner html of a div, but for some reason, it isn't working. I have found that others have had this problem before, but none of the solutions I found in other posts works. I don't understand what's wrong.

Here is my test function:

function test(){
    document.getElementByID("test").innerHTML = "why won't you work";
    alert("hello");
}
window.onload = test;

The function is being called because the alert box works if the document.getElementByID line is commented out. It doesn't work if that line isn't commented. My console is showing an error for that line:

TypeError: 'undefined' is not a function (evaluating 'document.getElementByID("test")')

And of course, I have a div with that id in the body of my page.

<div id="test"></div>

Everything I have found online says that this should work. I am lost. Any help would be greatly appreciated.

Answer 1

It's document.getElementById and not document.getElementByID.

You can test this right now using firebug or chrome dev tools on this site by doing:

document.getElementById('hlogo').innerHTML='It works!'; // have a look at the logo

Answer 2

JavaScript is case sensitive. Watch your capitalization closely when you write JavaScript statements:

A function getElementById is not the same as getElementbyID.

A variable named myVariable is not the same as MyVariable.

Answer 3

I had this error because I was attempting to run document.getElementById('donationContainer').innerHTML('<div></div>');

instead of:

document.getElementById('donationContainer').innerHTML = '<div></div>';

Note the brackets: use ...innerHTML = ... not ...innerHTML(...

I hope this helps someone else fix this stupid issue