External JavaScript Not Running, does not write to document

Question

I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.

However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks

Html file:

<html>

    <head>
    </head>

<body>

    <p id="external">

        <script type="text/javascript" src="hello.js">
            externalFunction();
        </script>
    </p>

    <script type="txt/javascript" src="hello.js"></script>

</body>

</html>

JavaScript file

function externalFunction() 
        {
         var t2 = document.getElementById("external");

            t2.innerHTML = "Hello World!!!"

         /*document.getElementById("external").innerHTML = 
         "Hello World!!!";*/

        }

Did you run the function externalFunction() after declaration? — cuSK
– cuSK, Commented Nov 8, 2014 at 20:13
In order for the function to work, you need to call it.Call the function after declaration and it will work. — ashfaq.p
– ashfaq.p, Commented Nov 8, 2014 at 20:22
Isn't it redundant to call the script twice? I was told to always add the <script></script> at the end of the body. — Jon Q
– Jon Q, Commented Nov 8, 2014 at 20:35

Pedro Lopez · Accepted Answer · 2014-11-08 23:13:15Z

In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.

http://www.w3schools.com/js/js_whereto.asp

index.html

<!DOCTYPE html>
<html>

<head>
  <!-- You could put this here and it would still work -->
  <!-- But it is good practice to put it at the bottom -->
  <!--<script src="hello.js"></script>-->
</head>

<body>

  <p id="external">Hi</p>

  <!-- This first -->
  <script src="hello.js"></script>

  <!-- Then you can call it -->
  <script type="text/javascript">
    externalFunction();
  </script>

</body>

</html>

hello.js

function externalFunction() {
  document.getElementById("external").innerHTML = "Hello World!!!";
}

Plunker here.

Hope this helps.

rlemon · Accepted Answer · 2014-11-08 22:45:38Z

3

Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.

answered Nov 8, 2014 at 22:45

community wiki

rlemon

Comments

karabuta · Accepted Answer · 2014-11-08 20:43:44Z

0

use onload eventListener to make it simple

<script>
   window.onload = function() {
      externalFunction();
   }
</script>

answered Nov 8, 2014 at 20:43

karabuta

313 bronze badges

Comments

VLAZ · Accepted Answer · 2019-05-31 08:14:04Z

0

You're trying to call the function before it has been loaded.

Place the load script above the declaration:

<html>

    <head>
<script type="txt/javascript" src="hello.js"></script>
    </head>

<body>

    <p id="external">

        <script type="text/javascript">
            externalFunction();
        </script>
    </p>



</body>

</html>

Also you have a typo:

 <script type="txt/javascript" src="hello.js"></script>

Should be:

<script type="text/javascript" src="hello.js"></script>

The script type needs to be "text/javascript" not "txt/javascript".

edited May 31, 2019 at 8:14

VLAZ

29.6k9 gold badges65 silver badges88 bronze badges

answered Nov 8, 2014 at 20:40

ZeroBased_IX

2,7473 gold badges29 silver badges47 bronze badges

1 Comment

Recycled Steel Over a year ago

You also have typo "text"

Collectives™ on Stack Overflow

External JavaScript Not Running, does not write to document

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related