I don't understand why this is not working. I'm sticking to the reference on w3schools. Here the code :
HTML:
<button onclick="click()">Test</button>
Javascript:
function click() {
alert("Hello !");
}
-
2W3Schools is a rubbish tutorial site, it is not at all affiliated with the W3C.Quentin– Quentin2014-06-30 06:35:58 +00:00Commented Jun 30, 2014 at 6:35
-
I hate who whenever see a w3school link paste the common sentence: "w3school ...." without continuing reading the answer!amd– amd2014-06-30 06:38:44 +00:00Commented Jun 30, 2014 at 6:38
-
@Ahmad — It's a question, not an answer, and I read all of it. (And now I've edited the question to remove the problematic misattribution of the content)Quentin– Quentin2014-06-30 06:43:20 +00:00Commented Jun 30, 2014 at 6:43
-
@Quentin, so where is the problem with W3Schools here ?amd– amd2014-06-30 06:51:33 +00:00Commented Jun 30, 2014 at 6:51
-
@Ahmad — They aren't the W3C as the question claimed.Quentin– Quentin2014-06-30 08:18:20 +00:00Commented Jun 30, 2014 at 8:18
|
Show 2 more comments
5 Answers
It doesn't work because you have configured JSFiddle to wrap the JavaScript in a function and call it onload. This stops your function being a global so it isn't in scope for your intrinsic event handler attribute.
Additionally, after you fix that, the weird scoping rules for intrinsic event attributes (I have no idea where these are documented) means that click is resolved as the button's click property before the scope is searched far enough to find the global click function.
The quick and dirty solution is:
- Rename the function to something that doesn't clash with existing property names
- Pick a no wrap option from the menu on the left of JSFiddle
The proper solution is to attach your event handlers with JavaScript. This isn't the 1990s and we should avoid using the techniques of that era that fail to separate concerns. Keep your JS in one place and your HTML in another.
<button>Test</button>
<script>
document.querySelector('button').addEventListener('click', click);
function click(evt) {
alert("Hello !");
}
</script>
1 Comment
Anant Dabhi
no wrap first time i saw this option .. greatThis code doesn't work because there's already a click native method and shadowing it prevents the normal click event handling. Give it another name and it will work.
A way to see that is to define your button as
<button onclick="console.log(click)">Test</button>
Comments
I think you cann't give a function name as click. Change your function name & it should work.
Comments
click seems to be reserved.
Try renaming the method: http://jsfiddle.net/qeCE5/1/
function clickMe() {
alert("Hello !");
}
Comments
you need to change the function name. 'click' might be a reserved keyword, so it wont recognize when you call it. rename it to other names eg. 'democlick()'. also don't forget to save your code with '.html. extension. please tell me if any issue exists. thanks.
