External javascript file declaration in <body> not working

Frontend Web Development: The Big Nerd Ranch Guide Chapter 6: Handling Events with JavaScript
1

From page 105 onward the text has you create a script file, main.js, and has you invoke it in the ,body. of the index.html file between the and elements using the following declaration as published in the book - “script src=“scripts/main.js” charset=“utf-8”></script” (I’ve left off the 1st and trailing angle brackets because they cause the text not to display in here for some reason.) (*Hey guys…isn’t this forum supposed to be a place where you can get help? If so don’t you think that being able to display code in it’s entirety would be a worthwhile endeavor?)

Anyway unfortunately nothing I do will get it to work from there. I thought it might be an issue with the relative path so I defined it using the full path name like I had to do with the font declarations from a previous chapter to get them to work even though all the images are fine referenced with a relative path.

Even the full path declaration did not work. So I first tried ignoring the use of an external file and added all the variable declarations and eventually the functions to the index.html file between the header elements and everything worked correctly. I then moved all the javascript code back to main.js and replaced the javascript source in the index.html header with the previous src declaration using the relative path as in the book only still locating it in the header rather than the body and the javascript still worked fine.

So…why isn’t the main.js file being executed from the body area of the html file? I know I’ve seen this done many times on other web pages so I had no expectations that there would be any problems here.

I’m using Chrome version 56.0.2924.87 (64-bit) on Windows 7 Enterprise (x64). Anyone have any ideas?

Thanks.

2

Hi @mpiazza! RE adding code on the forum, you can use Markdown in your posts. So you can surround code with backticks to display it, like this: <script src="scripts/main.js" charset="utf-8"></script>. If you need a codeblock, you can surround lines with three backticks like this:

```
console.log('hi!');
```

Here’s a Markdown cheat sheet.

Back to your original question—when you reload the page, is anything printed in the console? Any network errors?

3

Thanks for the code display instruction!

I was wondering about this in the back of my mind but I finally got frustrated and desperate enough to test it out.
On page 105 the text talks about the need to “tell the HTML to run the Javascript.” The narrative then goes on to give the following example:

             </div>
          </div>
       </main>
     <script src="scripts/main.js" charset="utf-8"></script>
  </body>
</html>

And the above is what I had in my code. I tried adding “debugger” to the Javascript file in a few places in order to step thru the code and see why it wasn’t executing the “event.preventDefault();” command only to come to the realization that the Javascript file was never even being executed. This got me really scratching my head for a while until I remembered actually seeing another piece of the command in other pages I had looked at that told the browser the type of script it would be dealing with as in:

<script type="text/javascript"....

I then added the "type"statement to the full command as in:

             </div>
          </div>
       </main>
     <script  type="text/javascript" src="scripts/main.js" charset="utf-8"></script>
  </body>
</html>

The result of this change was that the Javascript file was read and executed and the web page operated as expected.

I am running this version of Chrome - Version 56.0.2924.87 (64-bit) - it says it is the latest. All I know is that Chrome seems to require the additional piece of the command which is not included in the book.

Thanks for your help.

4

@mpiazza Great to hear it’s working! That is very strange… the type attribute used to be required years ago (back when VBScript in the browser was a thing :slight_smile: ) but nowadays it’s supposed to be optional.

I’ll bet your page is being parsed as HTML 4 (which requires the type attribute on script tags), is the first line of your index.html set to <!DOCTYPE html>?