CODEWITHSUNDEEP
javascriptpropertiesinnerhtmltypeerror
Davix Ponze
Davix Ponze

Reputation: 229

Uncaught Typeerror: cannot read property 'innerHTML' of null

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;

Upvotes: 22

Views: 262024

Answers (12)

NebuCodeNezzar
NebuCodeNezzar

Reputation: 355

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.

Upvotes: 0

nahom nigussie
nahom nigussie

Reputation: 1

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>

Upvotes: 0

Sercan
Sercan

Reputation: 5081

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>

Upvotes: 0

jianbo.zheng
jianbo.zheng

Reputation: 529

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;
}

Upvotes: 42

Tran Quoc Bao
Tran Quoc Bao

Reputation: 184

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.

Upvotes: 1

Kel_Ebek
Kel_Ebek

Reputation: 61

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.

Upvotes: 6

Jos&#233; Rasmussen
Jos&#233; Rasmussen

Reputation: 141

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

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

Upvotes: 0

egiray
egiray

Reputation: 1209

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.

Upvotes: 33

Catherine Gracey
Catherine Gracey

Reputation: 101

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.

Upvotes: 7

Swaraj Ghosh
Swaraj Ghosh

Reputation: 2304

//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>

Upvotes: 0

agalal designs
agalal designs

Reputation: 51

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>

Upvotes: 5

James Shuttler
James Shuttler

Reputation: 1374

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.

Upvotes: 4

Related Questions