Can't execute simple JS by onclick from a button

Question

This is almost embarassingly simple. I haven't touch JS for a while and now I can't do anything while clicking on a button...

The fiddle shows what I mean.

Click below
<div id='holder'></div>
<input type='button' value='below' onclick='onClick()'>

function onClick() {
  alert('beep');
}

Smack me if it's something obvious. Which it most likely is...

@Eric How do I do that on jsFiddle page? There are three different text areas for the that... — Konrad Viltersten, Apr 01 '15 at 08:08
Top-left i for HTML, top-right is for CSS, bottom-left is JS and the last one is the outcome — Eric, Apr 01 '15 at 08:09
Are you sure that's the correct fiddle? It has nothing to do with the script you actually have posted above. — briosheje, Apr 01 '15 at 08:09
@aSharma Now it is. Saving **before** sharing the link, you know. Complicated stuff if you're dumb... :) — Konrad Viltersten, Apr 01 '15 at 08:11
https://jsfiddle.net/e1qnsxkb/3/ You forgot to add jQuery to your fiddle. Besides, you can just use the comfortable jQuery .on — briosheje, Apr 01 '15 at 08:13
The Frameworks and Extensions section in the **[Fiddle](https://jsfiddle.net/e1qnsxkb/10/)** change *Onload* to *No Wrap - in * — Shaunak D, Apr 01 '15 at 08:16
You need to define the function before you assign it to onClick. See here, I have updated your fiddle. https://jsfiddle.net/e1qnsxkb/11/ — wonderbell, Apr 01 '15 at 08:19
@Justinas: Did you FIRST read the question and the fiddle before posting? There is the jQuery tag in the OP's question and, in the fiddle, he is using jQuery WITHOUT including it. Why on Earth would you add a pure javascript event listener when you can do that using jQuery? Also, using "inline" javascript event listeners on HTML seems to be considered bad practice: http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice . And this is the solution: https://jsfiddle.net/e1qnsxkb/13/ — briosheje, Apr 01 '15 at 08:22
@aSharma You need to post that as a reply. That **was** the problem. Has it been changed on the site? I don't recall ever needing to set the combo box... — Konrad Viltersten, Apr 01 '15 at 08:24
No, it is not changed on the site, it is merely an updated version of your fiddle. You can see the difference in the url. If you don't recall the settings on Fiddle, may be you need this http://doc.jsfiddle.net/ Happy javascripting. — wonderbell, Apr 01 '15 at 08:38
Similar Questions can be found [here][1] and [here][2] [1]: http://stackoverflow.com/questions/11657186/simple-javascript-onclick-not-working [2]: http://stackoverflow.com/questions/9114747/onclick-event-not-firing-on-jsfiddle-net — Raghvendra Kumar, Apr 01 '15 at 08:44
http://stackoverflow.com/questions/15171008/onclick-not-working-with-button — Raghvendra Kumar, Apr 01 '15 at 08:46

score 0 · Answer 1 · answered Apr 01 '15 at 08:12

0

<html>
<head>

<script>
function onClick() {
  alert('beep');
}
</script>
</head>
<body>
<input type='button' value='below' onclick='onClick()'>
</body>
</html>

answered Apr 01 '15 at 08:12

Ramkumar

181
5

1

What have you changed and why it fixes problem? – Justinas Apr 01 '15 at 08:14
He defined onClick function before DOM was created. – Jeremen Apr 01 '15 at 08:15
@Jeremen Don't spoil. Let him figure it out himself! – Justinas Apr 01 '15 at 08:16
@Jeremen In jsFiddle, I have different frames for that. How do I do that **there**?! – Konrad Viltersten Apr 01 '15 at 08:21
@Konrad Your code is fine, but in your fiddle you are linking the js "on load", meaning your function is defined after the DOM creation. There is an option in that dropdown to place the js in the head section (which is what Ramkumar has done). – JohnIdol Apr 01 '15 at 08:25
@KonradViltersten, in Frameworks & Extensions section in second select choose a "**No wrap - in **" option. – Jeremen Apr 01 '15 at 08:27

score 0 · Accepted Answer · answered Apr 01 '15 at 08:42

0

You need to define the function before you assign it to onClick. See here, I have updated your fiddle.

Additionally I have commented you Jquery code, didn't think it was relevant.

answered Apr 01 '15 at 08:42

wonderbell

1,126
9
19

Can't execute simple JS by onclick from a button

2 Answers2