Linking External JS Files

Question

I am working on an assignment which requires that I link an external JS file into an HTML file. Here's the JS (file name 'whileLoop.js'):

function evenCount () {

var loopCount = 2;

while (loopCount <= 101) {

    document.write(loopCount + " is an even number. <br /">);
    loopCount = (loopCount + 2);

    }

}

And here's the HTML:

<!DOCTYPE html>

<head>
<title>JS Assignment</title>
<head>

<body>

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

</body>

</html>

If I copy the raw JS code (without the function call) into the HTML file inside the tags, then the HTML outputs correctly. When I attempt to link to the JS file inside the HTML file, the HTML outputs a blank page.

The expected output is a page that lists every even number between 2 and 101.

Where do you actually call the function on the page? Also, what's wrong with a `for()` loop? Also, avoid using [`document.write`](https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice)! — BenM, Sep 09 '17 at 15:33
is the `js` file in the same directory as the `html`? Then you should remove the `/` — adiga, Sep 09 '17 at 15:34
You probably don't want the `/` in the `src` attribute, as that tells the browser to look for the file at the root of the domain/host, and I bet your file is alongside your HTML. (Side note: Leave off `type`, the default `type` is JavaScript.) — T.J. Crowder, Sep 09 '17 at 15:37

score 0 · Accepted Answer · edited Sep 11 '17 at 09:31

The document.write line has a syntax error at <br /"> - notice the quotation mark being on the left of > rather than on the right?

As for JS being directly within HTML as opposed to an external file you can include any JS within HTML by wrapping it in <script></script> while when including an external JS file you need to use <script> with the src attribute pointing to that file and making sure there is nothing inside of the <script src='whileLoop.js'> and the closing </script>. In your specific case if you want to use the external file, make sure that whileLoop.js is in the same directory as your index.html and then include it as per the snippet below:

Here is your code working with the script being within HTML and another file included in the <head> part of your HTML. Please note that the script included in <head> had no effect and I added that line just to show you the two ways of having JS work within your code.

<head>
<title>JS Assignment</title>
<head>
<script type="text/javascript" src="whileLoop.js"></script>
</head>
<body>
<script>
  function evenCount () {

  var loopCount = 2;

  while (loopCount <= 101) {

      document.write(loopCount + " is an even number. <br />");
      loopCount = (loopCount + 2);

      }

  }
  evenCount();
</script>
</body>

score 0 · Answer 2 · answered Sep 09 '17 at 15:50

you could change the markup and html to the following. I hope it works for you too:

JS: while.js

function evenCount() {
    console.log(loopCount);
    var loopCount = 2;
    while (loopCount <= 101) {
        document.write(loopCount + " is an even number. <br />");
        loopCount = (loopCount + 2);
    }
}

evenCount();

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>JS Assignment</title>
</head>

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

</html>

Basically you had unclosed tags and it was an incompletely rendered DOM you were writing into. This created an unbalanced tree error. Also, you JS was not being called (earlier). It has to be called if you wrap your code within a function.

(PS: please note the JS filename change)

Linking External JS Files

2 Answers2