Cannot set property 'innerHTML' of null

javascript onload innerhtml
Joshua W picture Joshua W · Aug 14, 2013 · Viewed 381.1k times · Source

Why do I get an error or Uncaught TypeError: Cannot set property 'innerHTML' of null? I thought I understood innerHTML and had it working before.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

</head>

<body>
<div id="hello"></div>
</body>
</html>

Answer

Erik Godard picture Erik Godard · Aug 14, 2013

You have to place the hello div before the script, so that it exists when the script is loaded.

Related questions

How do I call a JavaScript function on page load?

Traditionally, to call a JavaScript function once the page has loaded, you'd add an onload attribute to the body containing a bit of JavaScript (usually only calling a function) <body onload="foo()"> When the page has loaded, I …

Read More
How to run a function when the page is loaded?

I want to run a function when the page is loaded, but I don’t want to use it in the <body> tag. I have a script that runs if I initialise it in the <body>, …

Read More
How to run function in AngularJS controller on document ready?

I have a function within my angular controller, I'd like this function to be run on document ready but I noticed that angular runs it as the dom is created. function myController($scope) { $scope.init = function() { // I'd like to run …

Read More