Uncaught Typeerror: cannot read property 'innerHTML' of null

Question

Can anyone explain what is this error?

Uncaught TypeError: cannot read property 'innerHTML' of null

This is the line which is causing the issue:

var idPost=document.getElementById("status").innerHTML;

score 40 · Answer 1 · edited Dec 10 '21 at 01:20

40

var idPost=document.getElementById("status").innerHTML;

The 'status' element does not exist in your webpage.

So document.getElementById("status") return null. While you can not use innerHTML property of NULL.

You should add a condition like this:

if(document.getElementById("status") != null){
    var idPost=document.getElementById("status").innerHTML;
}

edited Dec 10 '21 at 01:20

Ryan M

18,333
31
67
74

answered Sep 26 '12 at 04:30

jianbo.zheng

509
4
3

this worked out like a charm for me in this instance https://jsfiddle.net/gqrhcu6f/ – Al Augustin Jan 14 '20 at 15:00

egiray · Answer 2 · 2017-07-04T14:16:58.390

32

Update:

The question doesn't ask for jquery. So lets do it without jquery:

document.addEventListener("DOMContentLoaded", function(event) { 
    //Do work
});

Note this method will not work on IE8.

Old Answer:

You are calling this script before DOM is ready. If you write this code into jquery's $(function() method it will work.

edited Jul 04 '17 at 14:16

answered Dec 10 '12 at 12:12

egiray

1,169
1
12
17

3

This was the culprit in my case. This point should definitely be included in a top answer. – Goose Feb 27 '15 at 14:39
1

Yes, this is the simple answer, should've been put to the top. – MattSom Mar 25 '17 at 15:36
1

@MattSom No it shouldn't, because of the fact that the question never included anything about jQuery and jQuery is not needed for this kind of behaviour. – Douwe de Haan Jun 27 '17 at 11:46

score 7 · Answer 3 · answered Dec 28 '14 at 01:32

If the script is in the head of your HTML document, the body of your HTML document has not yet been created by the browser, regardless of what will eventually be there (the same result occurs if your script is in the HTML file but above the element). When your variable tries to find document.getElementById("status") it does not yet exist, and so it returns a value of null. When you then use the variable later in your code, the initial value (null) is used and not the current one, because nothing has updated the variable.

I didn't want to move my script link out of the HTML head, so instead I did this in my JS file:

var idPost //define a global variable
function updateVariables(){
    idPost = document.getElementById("status").innerHTML; //update the global variable
}

And this in the HTML file:

<body onload="updateVariables()">

If you already have an onload function in place, you can just add the additional line to it or call the function.

If you don't want the variable to be global, define it locally in the function that you are trying to run and make sure the function is not called before the page has fully loaded.

score 6 · Answer 4 · edited Jun 18 '20 at 14:30

6

I had a similar problem, but I had the existing id, and as egiray said, I was calling DOM before it loaded and Javascript console was showing the same error, so I tried:

window.onload = (function(){myfuncname()});

and it starts working.

edited Jun 18 '20 at 14:30

Tim Anthony

124
9

answered Jan 11 '15 at 21:17

Kel_Ebek

61
1
2

score 5 · Answer 5 · answered Feb 08 '13 at 05:21

5

run the code after your html structure in the body statement

    <html>
    <body>
    <p>asdasd</p>
    <p>asdasd</p>
    <p>asdasd</p>
    <script src="myfile.js"></script>
    </body>
    </html>

answered Feb 08 '13 at 05:21

agalal designs

51
1
1

score 4 · Answer 6 · answered Jan 25 '12 at 13:15

While you should ideally highlight the code which is causing an error and post that within your question, the error is because you are trying to get the inner HTML of the 'status' element:

var idPost=document.getElementById("status").innerHTML;

However the 'status' element does not exist within your HTML - either add the necessary element or change the ID you are trying to locate to point to a valid element.

score 1 · Answer 7 · answered Nov 03 '21 at 04:24

1

Are you declaring the <script> tag before the #status element?

If you do, the statement in that tag will be executed first, and now there is no element with the id status.

The best way is to put this script tag right before the </body> tag.

answered Nov 03 '21 at 04:24

Tran Quoc Bao

81
1
6

score 0 · Answer 8 · answered Nov 19 '13 at 06:53

0

//Run with this HTML structure
<!DOCTYPE html>
<head>
    <title>OOJS</title>

</head>
<body>
    <div id="status">
    </div>
    <script type="text/javascript" src="scriptfile.js"></script>
</body>
</html>

answered Nov 19 '13 at 06:53

Swaraj Ghosh

2,284
3
16
19

score 0 · Answer 9 · answered Jun 18 '20 at 12:04

0

Looks like the script executes before the DOM loads. Try loading the script asynchronously.

 <script src="yourcode.js" async></script>

answered Jun 18 '20 at 12:04

José Rasmussen

131
2
5

Why would adding the async tag help? As described [here](https://www.w3schools.com/tags/att_script_async.asp) using this tag will make the script execute as soon as possible (possibly before the DOM is available). – Mathyn Jun 18 '20 at 12:39
If the "async" attribute is present, the script and the DOM will run at the same time. If you want to delay the execution of the script until after the DOM is ready you can use the "defer" attribute. Otherwise the script will try to run on elements that don't yet exist. – José Rasmussen Jun 18 '20 at 14:34

Sercan · Answer 10 · 2022-02-10T06:12:30.917

I got the same error on a file I used while doing a case study on GitHub. I noticed that this error occurs because external JavaScript file declarations are defined in the <head></head> field in the HTML file. A situation that could cause this issue is resolved when external JavaScript files are declared at the end of the <body></body> field in the HTML file.

console.log(document.getElementById("container").innerHTML);
console.log(document.getElementsByClassName("content")[0].innerHTML);
console.log( $(".content")[0].innerHTML );
console.log( $(".content").html() );
console.log( $("#container")[0].innerHTML );

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/style.css">
  <title>jQuery</title>
</head>
<body>
  <div id="container">
    <h3>jQuery Library</h3>
    <p class="content">jQuery is a JS library.</p>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>

score 0 · Answer 11 · edited Feb 18 '22 at 16:13

0

If the id "status" is not found in the html file it shows the error.

Add the "status" id in your html file. For example:

<!DOCTYPE html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="status">
        </div>
        <script type="text/javascript" src="scriptfile.js"></script>
    </body>
</html>

edited Feb 18 '22 at 16:13

RobC

22,977
20
73
80

answered Feb 18 '22 at 03:40

nahom nigussie

1

score 0 · Answer 12 · answered Feb 08 '23 at 07:59

There is a mistake I've done and I hope anyone else doing this will learn from me. I got the same error :

app.js:116 Uncaught (in promise) ReferenceError: holder is not defined
    at getRandomMovieById (app.js:116:3)

The mistake I did was to use one Javascript file for two HTML files. I created individual files for each of my HTML and it worked awesomely.

Uncaught Typeerror: cannot read property 'innerHTML' of null

12 Answers12

Update:

Old Answer:

Linked

Related