Javascript at head does not work

Question

Given this html code that we are not allowed to edit

<!doctype html>
<html manifest="survey.manifest">
<head>
    <title>Offline Survey Application</title>
    <link rel="stylesheet" href="styles/survey.css" type="text/css">
    <script type="text/javascript" src="scripts/survey.js"></script>
</head>
<body>
   <!--should be empty --->
</body>
</html>

<!-- YOU ARE NOT ALLOWED TO EDIT THIS FILE!!! -->

I cannot seem to make my javascript work. But if i placed the script element at the body the whole script shows up. The problem is that we are not allowed to do that though. Is there any other way to make it work?

EDIT: I am aware that the script runs before the other elements are loaded. I can't go with moving it elsewhere since the file would have been modified :/

See [Why does jQuery or a DOM method such as `getElementById` not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element). Also [learn how to](http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820) [**debug** JavaScript](https://developers.google.com/chrome-developer-tools/docs/javascript-debugging). — Felix Kling, Feb 02 '14 at 17:55
Define "does not work." What *does* happen? Is the `.js` file found at all? Does the code execute? Are there any errors on the JavaScript console? — David, Feb 02 '14 at 17:58
If you look at the the link I posted, you will find solutions for how to run the code when the DOM is loaded and it is placed in the head. — Felix Kling, Feb 02 '14 at 18:18

score 4 · Accepted Answer · answered Feb 02 '14 at 17:54

It could be due to the fact that the script only works when the page has finished loading, but by placing the code in the head, you load the script first. To get around this, you could try replacing your current script code with this:

<script type="text/javascript" src="scripts/survey.js" defer></script>

This ensures that the code only loads once the page has finished loading.

score 2 · Answer 2 · answered Feb 02 '14 at 17:54

Presumably, your script is attempting to modify the DOM and tries to access the body element.

At the time the script is initially loaded and run, the body does not exist.

Move your code to a function, and bind that code as a load event handler. (addEventListener('load', someFunction);).

Javascript at head does not work

2 Answers2