CODEWITHSUNDEEP
javascriptinnerhtmltypeerror
AFlyingLemon
AFlyingLemon

Reputation: 53

Uncaught TypeError: Cannot read property 'innerHTML' of null

Keep getting this error, no idea why

Uncaught TypeError: Cannot read property 'innerHTML' of null

My code is:

function write(message) {
  document.getElementById('message').innerHTML += message + '<br/>';
}

function calculateCircumference (diameter) {
    return diameter * 3.14;
}

write (calculateCircumference(4));

Upvotes: 0

Views: 31844

Answers (4)

kushagra-aa
kushagra-aa

Reputation: 570

This error is usually caused when the element is not loaded and the js function is trying to access it.

try adding the <script> tag at the very end of the document before </body>

or check if the name of the element is mistyped.

Upvotes: 0

Salad.Guyo
Salad.Guyo

Reputation: 3395

If you have your id is set and you still get the same error, make sure you have done the opening and closing tags of your html correctly.

Upvotes: 0

mguimard
mguimard

Reputation: 1891

Seems that your code is executed before the DOM is ready

window.onload = function(){
    function write(message) {
        document.getElementById('message').innerHTML += message + '<br/>';
    }

   function calculateCircumference (diameter) {
        return diameter * 3.14;
    }

    write (calculateCircumference(4));
}

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Admittedly, the error message is not exactly transparent as to its meaning (but at least you get an error - jQuery would just silently do nothing!)

What it means is that the result of document.getElementById('message') is null. Looking at the docs you will find that this happens when the element cannot be found.

The main reason for an element not being found is because it doesn't exist yet.

<script>// do something with document.getElementById('message');</script>
<div id="message"></div>

The above will FAIL because message does not exist yet. Moving the script after the div will make it work.

Side-note: 3.14 is far too inaccurate. Use Math.PI instead, it's as accurate as a number in JavaScript can be.

Upvotes: 7

Related Questions