CODEWITHSUNDEEP
javascripthtml
BagrijRoman
BagrijRoman

Reputation: 249

Problems with including external JS file to HTML

I've read many tutorials and tried them, but they don't work. Just for example I wrote this simple code:

<!DOCTYPE html>
<html>
  <head>

  </head>
<body>
    <p id="testElement"> Html text</p>

<script>
     var paragraph = document.getElementById("testElement");
     paragraph.innerHTML = "Test Message";
</script>

</body>
</html>

I get Test Message text in my page.

Then I put my JS code to an external file: '/js/js.js'

var paragraph = document.getElementById("testElement");

paragraph.innerHTML = "Test Message";

And modify the HTML file to:

<!DOCTYPE html>
<html>
  <head>
        <script type="text/javascript" src="/js/js.js"></script>
  </head>
<body>

    <p id="testElement"> Html text</p>

</body>
</html>

When I open the HTML file in a browser, I only get Html text. My JS does not work. Please explain what I am doing wrong.

Upvotes: 2

Views: 306

Answers (4)

10101010
10101010

Reputation: 1821

Try this

var doSomething = function()
{
	var paragraph = document.getElementById("testElement");

	paragraph.innerHTML = "Test Message";
}
<!DOCTYPE html>
<html>
    <head>
       <script type="text/javascript" src="js.js"></script>
    </head>
    <body onload = "doSomething();">

       <p id="testElement"> Html text</p>

    </body>
</html>

Try saving both the files in the same folder.

Make use of your browsers developer console, to determine whether any errors have occurred.

Regarding 'onload', you can have a look at this link.

Upvotes: 1

prompteus
prompteus

Reputation: 1032

Your problem is that javascript linked in head is executed before the body is loaded, so you can just put the script at the end of the body like this:

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <p id="testElement"> Html text</p>
        <script type="text/javascript" src="js/js.js"></script>
    </body>
</html>

Upvotes: 3

Berendschot
Berendschot

Reputation: 3104

This should work fine:

var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <p id="testElement">Html text</p>
  <script type="text/javascript" src="/js/js.js"></script>
</body>

</html>

Please make sure that <script type="text/javascript" src="/js/js.js"></script> is placed just before </body>.

Upvotes: 2

Halcyon
Halcyon

Reputation: 57709

Check the JavaScript error console.

Your code runs before the document is rendered so the node testElemet doesn't exist. Either move your script-include down as the last element in the body or wrap your code in a load/ready event.

function on_document_ready(callback) {
    if (document.readyState === "complete") {
        callback();
    } else {
        document.addEventListener("DOMContentLoaded", callback);
    }
}

on_document_ready(function () {
    var paragraph = document.getElementById("testElemet");

    paragraph.innerHTML = "Test Message";
});

Upvotes: 2

Related Questions