-1

It should be easy, but as easy as it should be I can't solve the problem.

If I'm typing the following HTML and JS code into an online editor, everything works fine but if I'm typing this into my (offline) editor it won't work. Here's the online code: http://jsbin.com/kenurunahu/1/edit?html,js,output)

I bet it has something to do with the loading order and how the files are linked.

Thats how my (lokal) HTML-file looks like (where the files are linked):

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" content="Index.css">
  <script src="Script.js"></script>
</head>

<body>
  <p id="demo">
    something
  </p>
</body>

</html>

Many Thanks for Help!

[Update] Firefox and Chrome display the JS file. Sometimes I get an error message that says 'innerHTML is null', but if I write the same code into the console everything works fine.

Improve this question
4
  • what happens when you open the .html file in your browser? Commented May 7, 2016 at 15:31
  • 2
    Are you getting any errors in the dev console (open it by pressing F12 in your browser)? Commented May 7, 2016 at 15:32
  • You should have a file named Script.js at the same level as your html file Commented May 7, 2016 at 15:32
  • This question is similar to: Executing JavaScript in the <head>, getElementById returns null. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. Commented Dec 5, 2024 at 9:33

2 Answers 2

Reset to default
1

you have the error when the js script is loaded before the html dom is fully loaded by the browser. A simple solution for your testing is to place the script include at the end of your html page, like this :

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" content="Index.css">
</head>

<body>
  <p id="demo">
    something
  </p>
  <script src="Script.js"></script>
</body>

</html>

A better solution is to run your script only when the dom is fully loaded. For example with the body onload event :

<body onload="yourFunc()">

Or event better by using only js code, for example with jquery ready function or by writing a simple custom handler that should work on all major browsers :

document.addEventListener("DOMContentLoaded", function(event) { 
  //call your func here
});

Hope that helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It helped a lot! Thanks!
-1

As a good practice, your scripts should be placed at the closing of body tag. External scripts are blocking and hence it would make sense we do not put them at the top. Also, when your script placed at the top runs, your DOM may not be ready, which means any element your script is trying to access may not be present in DOM at all which results in your error.

Hence, all your scripts should be at the closing of body tag. That way when the script loads and runs, you can be assured that the DOM is ready.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" content="Index.css">

</head>

<body>
  <p id="demo">
    something
  </p>
  <script src="Script.js"></script>
</body>

</html>

Improve this answer

3 Comments

Thanks! Since all other thinks like pictures, favicons and css-files are linked in the 'head' section, I thought it would be good to have the Script there.
@David I put almost all my scripts / links-to-scripts in the <head> section. It is not strictly necessary to place them just before </body>. There's nothing wrong with doing so, and sometimes that is the best thing to do, but usually it's not an issue.
Yes, but my Script refers to something in the HTML - it can't be called if it isn't exsiting at the moment..

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.