javascript code is not executing correctly locally, but works in JS Fiddle

Question

I have a very simple HTML file that looks like this:

<html>
    <head>
        <script src="jquery-1.11.1.min.js"></script>
        <script src="mainScript.js"></script>
    </head>
    <body>
        <button id = "theButton" type="button">Click Me!</button>
    </body>
</html>

mainScript.js looks like this:

$("#theButton").click(function() {
  alert( "Handler for .click() called." );
});

Nothing happens when I click though. If I put an alert into the JS file it will happen. If I run that snippet of JS in the console, then when I click the button it will work. I've tested that jQuery is loaded, and it is. I've also put this code in JS Fiddle and it works (http://jsfiddle.net/ds59ruvu/). What stupid thing am i doing locally that's preventing this from working?

And many more duplicates: [`[jquery] works in jsfiddle`](http://stackoverflow.com/search?q=%5Bjquery%5D+works+in+jsfiddle) — Felix Kling, Sep 10 '14 at 18:27

score 2 · Accepted Answer · answered Sep 10 '14 at 18:20

2

Wrap your code inside ready handler:

$(document).ready(function(){
  // your code here
});

OR,

$(function(){
  //your code here
});

OR, move your script file before the closing of body:

<html>
    <head>

    </head>
    <body>
        <button id = "theButton" type="button">Click Me!</button>
        <script src="jquery-1.11.1.min.js"></script>
        <script src="mainScript.js"></script>
    </body>
</html>

answered Sep 10 '14 at 18:20

Bhojendra Rauniyar

83,432
35
168
231

Ughh. I knew it must have been something stupid. I found something similar to this when I searched, but it didn't work. This did though. Thanks! – user3715648 Sep 10 '14 at 18:22
i think loading the script @ the end of the page would also work? – Julo0sS Sep 10 '14 at 18:23
@Julo0sS it should work, yes. – Regent Sep 10 '14 at 18:24
@user3715648 : sure it works :) when you load your javascript code, the elements you use into it have to be defined... you can't tell js "$("#element").click()" if your #element does not exist! ;) cya! – Julo0sS Sep 10 '14 at 18:28
2

@C-linkNepal I suppose for answering question that was asked many-many times before :) – Regent Sep 10 '14 at 18:28
@Regent So, In SO we can find hundreds of duplicate questions but exactly at time it really take some time to find, and I don't hope to get down (happy though) for the answers.... – Bhojendra Rauniyar Sep 10 '14 at 18:29
1

I'm having the hardest time understanding what you just said ^ – Sterling Archer Sep 10 '14 at 18:31
@C-linkNepal well, answers are still here, OP got the answer for his question and can move forward. Even reputation doesn't suffer: you got +28, I got +8. – Regent Sep 10 '14 at 18:40

score 0 · Answer 2 · answered Sep 10 '14 at 18:21

0

You should wrap your code with $(document).ready:

$(document).ready(function()
{
    $("#theButton").click(function()
    {
        alert( "Handler for .click() called." );
    });
});

The problem is in fact, that script is executed before element with id "theButton" is loaded, so you can't select it using $("#theButton").

answered Sep 10 '14 at 18:21

Regent

5,142
3
21
35

`$(function() {});` for short :) – GillesC Sep 10 '14 at 18:22
1

@gillesc it looks very strange for people, who is just starting to work with JS and jQuery, so I usually don't mention this version :) – Regent Sep 10 '14 at 18:27
1

Agreed, just thought was worth mentioning, the long version is technically more appropriate as descriptive of what it does :) – GillesC Sep 10 '14 at 18:32

javascript code is not executing correctly locally, but works in JS Fiddle

2 Answers2