Function not being called

Question

I'm trying to test some jQuery in this fiddle:

<div id="myDiv"></div>
<input name="Button3" type="button" value="Invoke" onclick="get()">

function get() {
 var data = {};
 data.foo = "bar";
 data.stuff = {
 nifty: "stuff"
 };
 $("#myDiv").text(JSON.stringify(data));
}

The get() function is not being called when I press 'Invoke'. What should occur is the div content should get updated.

Answer 1

The reason your fiddle doesn't work is because the settings are wrong. Change onLoad inthe dropdown on the left to no wrap (head) and it will work.

However, as you're using jQuery for your logic, it's best practice to use it to attach events too rather than use the clunky onclick attributes. Try this:

<input name="Button3" type="button" value="Invoke" id="button">

$("#button").click(get);

Example fiddle

• Rory McCrossan: @PriyankPatel Because the jsfiddle settings were wrong. Change onLoad on the left, to no wrap (head) and it will work.
• pylover: i think he asked: why the function not being called ?
• Rory McCrossan: Yeah he did, and I explained why. Read the first paragraph of my answer. Then please remove your downvote.

Answer 2

Jsfiddle evaluates your function on windows.load event:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
function doSomething() {
 var data = {};
 data.foo = "bar";
 data.stuff = {nifty: "stuff"};
 ("#myDiv").text(JSON.stringify(data));
}
});//]]> 
</script>

but the browser needs it on header or before than element that references to it.

you must to chage your code to this:

<div id="myDiv"></div>
<script type="text/javascript" >
 function doSomething() {
 var data = {};
 data.foo = "bar";
 data.stuff = {nifty: "stuff"};
 $("#myDiv").text(JSON.stringify(data));
}
</script>
<input name="Button3" type="button" value="Invoke" onclick="doSomething()">
​

BUT,

its recommended to use jquery style event attachment:

<input id="myBTN" name="Button3" type="button" value="Invoke" />
$('#myBTN').click(function(e){
 // do something
});

Answer 3

here you go the updated jiddle

you are calling the function using javascript whereas you have declared the function in you jQuery library.

HTML

<div id="myDiv"></div>
<input name="Button3" type="button" value="Invoke">

Script inside document ready

$('input[type=button]').click(function () {
get();
})
function get() {
var data = {};
data.foo = "bar";
data.stuff = {nifty: "stuff"};
$("#myDiv").text(JSON.stringify(data));
}

• Murtaza: @RepWhoringPeeHaa - thank very much for your advise but please give atleast 1 min to us to edit our answer..
• tereško: @Murtaza , why are you referring to yourself in plural ?
• Murtaza: I do my friend it has nothing to do with rep. answering here is important and i did that very well. you can see in my answer. What ever you are doing here my posting comments is unnecessary. if you have problem in my answer please let me know.
• PeeHaa: "if you have problem in my answer please let me know." That's what I did. By downvoting and I was so nice to post a comment about why I downvoted. Once the issue was fixed I removed downvote. Don't see anything wrong with that.
• Murtaza: ya thats write but it did not liked you posted on my rep. it is hard points earned by answering.. i did not liked u mentioned my rep. for no reason well you downvoted with 30 secs should have waited for 1 min to see if i am updating