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.

Why am I looking at screen grabs of code, and not actual text? — Lee Taylor, Jan 12 '16 at 23:33
why does that matter? While you were wondering that someone else answered the question and got the bounty. — Spilot, Jan 14 '16 at 02:51
It matters because images are not searchable. While this may answer **your** question, everyone after you searching by text in your code will not find this question. Hence, [Screenshots of code and/or erros are discouraged](http://meta.stackoverflow.com/questions/303812/discourage-screenshots-of-code-and-or-errors) — Leon Adler, Jan 18 '16 at 16:14

score 6 · Accepted Answer · edited May 23 '17 at 10:31

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.

that works but I can't get an alert to work. If I don't declare an empty variable named "alert" then intel will throw an error when I try to use the alert() function. Something about that doesn't feel right, but it's the only thing that will keep the error from getting thrown, on top of that, it STILL doesn't work, meaning the alert still won't fire. I tried by putting an alert right in the event listener code you wrote. — Spilot, Jan 13 '16 at 10:44
@Spilot try `window.alert`. Also could yiu show me your updated code. — Script47, Jan 13 '16 at 11:07
Ok that worked. I'm not sure why the Intel code editor requires you to go through the window dom object for an alert but it does. It also requires you to declare every dom object first before you use it. So it as to be var window; var document, and then in the event listener I can do document.getElementById..etc. Anyway thank you @Script47. You get the bounty! — Spilot, Jan 13 '16 at 18:21
It's also worth noting for future viewers of this question that window.alert didn't work outside of the DOMcontentLoaded event listener for some reason. This may be specific to the Intel XDK or not I don't know. — Spilot, Jan 13 '16 at 18:24

brk · Answer 2 · 2016-01-20T03:50:19.737

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

score 1 · Answer 3 · answered Jan 18 '16 at 01:02

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.

p.s. Goto the *File* > *Extension Manager...* menu item on the *Develop* tab (in the editor) to see the Brackets extensions I'm referring to. If you install Brackets standalone on your system you'll find a much larger array of such extensions to enhance your editor. — xmnboy, Jan 18 '16 at 19:02

score -1 · Answer 4 · answered Jan 10 '16 at 05:42

-1

Try to put the line outside your JS function

document.getElementById(......

inside your html page between

<script>HERE</script>

If this is still no working. Try to add onClick attribute to the button like this:

<button id="" onClick="testJsFile()">

Its also good to use google chrome element inspection while devlopping cuse it will give you error msg for all these things.

answered Jan 10 '16 at 05:42

MadeInDreams

1,991
5
33
64

1

Don't define event handlers inline. – Michał Perłakowski Jan 12 '16 at 23:25
Well ok but why not? – MadeInDreams Jan 14 '16 at 02:42
Its actualy a prety good way to debug his script. That way he will know if it is the function itself that isnt working or the jquery event handler so he can pin point the issue. – MadeInDreams Jan 14 '16 at 02:53

basic javascript alert not working in Intel XDK code editor

4 Answers4

Linked