basic javascript alert not working in Intel XDK code editor

Question

I'm starting fresh with a new blank Intel project and I haven't even started coding yet. I'm just setting up my file tree and making sure the html and javascript pages are connected via the right anchors and script paths. My first .js file won't work though.

I've included a screen shot of test code and the errors. I know the syntax is correct because it works when I put it in <script> tags in the index.html file. I'm getting "document not defined" and "alert not defined" errors or the js page though. I don't know what that means.

I've considered that my script tag src path in the index file is incorrect, but all the paths are relative in the commented out template script tags intel provides on the index page right out of the box, so why would I have to use an absolute path?

My path is: js/Test.js and it's the last script tag before the body.

Index.html file

*****UPDATE****

So I've tried a few things and it's still not working but I HAVE managed to get my errors down to just one inexplicable "missing semicolon", which will turn into an "unnecessary semicolon" error if I place it. Any way as per the first screen shot you'll see that I wasn't placing the document object inside of an explicitly declared variable. Once I did that and accessed it through dot syntax instead of an equal sign then I stopped getting the error. I included this screenshot to show my work before I made the changes.

so the problem I went on to have is that unless every function or dom object was declared with "Var", I'd get an error. This includes the alert() function which I don't think I've ever seen needing to be declared that way, but I gave the code editor what it wanted and this last screenshot is the results. It's not working, BUT I'm not getting the errors I was before, except for the missing/unnecessary semicolon paradox. Removing it or including it throws an error.

Answer 1

JavaScript can be loaded before or after the HTML, however the way it is done is slightly different depending on how you do it.

For example if you wish to include your JavaScript files within the head of the HTML file then you must wrap your JavaScript code with either DOMContentLoaded or jQuery's $(document).ready().

The common misconception of using window.onload will not fix the issue where the elements have not loaded in correctly.

The Mozilla Developer Network states on this page:

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

That quote in itself should prove that onload should not be relied on if you want the full DOM to be loaded properly before you start manipulating it. Instead you should do the following:

Vanilla

document.addEventListener("DOMContentLoaded", function (e) {
    /** DOM has been fully loaded here, so manipulation can begin. **/
    /** Your code here. **/
});

jQuery

$(document).ready(function () {
    /** DOM has been fully loaded here, so manipulation can begin. **/
    /** Your code here. **/
});

Click this link to see the difference between vanilla and jQuery.

The second way you can load JavaScript is by having all the script tags within the body but after all the HTML, that way it is guaranteed to load after the HTML.

Example

Try this working example I quickly coded up.

HTML

Replace the content within the body tag of your HTML to the following:

<button id="myJsTest">Click Me!</button>
<div id="clickCounter">Click Count: 0</div>

Replace the contents of your JavaScript with the following:

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    var clickCount = 0;

    document.getElementById("myJsTest").addEventListener("click", function() {
        clickCount++;

        document.getElementById("clickCounter").innerText = "Click Count: " + clickCount;
    });
});

Then use the Emulate tab in Intel XDK to test it.

Additional Information

When I use Intel XDK and I have an error, I quickly load the file in to the browser and check the console. It can be a really helpful and effective way of squashing those pesky little bugs.

Try using window.alert as alert is defined in the window object.

Answer 2

The reason you're seeing all those "error" messages in the editor window is because you've got the various JSLint/Hint tools loaded in the editor. They're trying to keep you honest and save you lots of time in the debugger chasing potential syntax errors.

The editor inside the XDK is Brackets, it is using standard Brackets extensions to provide those JSLint/Hint tools. You can download it and run it standalone on your system and edit directly within it, you don't have to use the editor inside the XDK (or you can use any other editor you like).

Because the Lint/Hint tools only look at one file at a time, and because your app is normally spread over multiple files, they don't know much about about what's defined in your other files. Likewise, those hint/lint tools need to be told that you're using some of the standard global methods and properties that are expected to be found in a browser (but which may not be found in other JavaScript environments, because JavaScript is no longer limited to just a browser environment -- in fact, your XDK app, aka Cordova app, runs inside a "webview" not in a browser, but that's another story...)

So, you should follow some standard practice of setting up your JSHint/Lint directives at the top of your JS files. For example, this is a good starting point:

/*jslint browser:true, devel:true, white:true, vars:true */
/*global $:false, intel:false */

See the JSHint documentation for details... and see the "Blank Cordova Starter App" in the "Start a New Project" section of the Projects tab for a better blank template to start (there is no real difference between a blank template and a demo app, they are structured identically).

For a more complete and even more instructive app, see the "Hello, Cordova" sample app. Both of those apps can also be found on the Intel XDK GitHub repo.

Answer 3

You are adding the js file that is <script src="js/Test.js"></script> inside header tag. So js will be first loaded and and it will attach all events to it. But when js is loaded button id="jsTest" is not present because DOM is not loaded.

Solutions :-You can follow either of the approach

Add your js files after DOM is ready

<body>
  <button id ="js/Test.js">Test JS</button>
     // other HTML tags
<script src = "js/Test.js></script>
</body>

Use window.onload

The load event fires at the end of the document loading process.

window.onload = testJsFile(){
  //Your code goes here
}

I will prefer to use the first approach since that also address other issues like page loading time