onclick event function in JavaScript

Question

I have some JavaScript code in an HTML page with a button. I have a function called click() that handles the onClick event of the button. The code for the button is as follows:

<input type="button" onClick="click()">button text</input>

The problem is that when the button is clicked, the function is not called. What am I doing wrong here?

Are you getting an error in the console? Can you post the click function. It works for me **[here](http://jsfiddle.net/gTqnV/)** — qwertymk, Mar 28 '11 at 02:00
I think you need a semicolon after the function like this: `button text` — EmCo, Mar 28 '11 at 02:03
onclick already assumes its JavaScript. you would only use javascript:click(); if you were setting an href for a link. Also the semicolon isn't needed unless a 2nd function was being called as well. — Mark, Mar 28 '11 at 02:15
where did you declare/put the click() function? Is it in the right scope? — ace, Mar 28 '11 at 03:01

Elian Ebbing · Accepted Answer · 2011-03-28T05:28:30.237

121

Two observations:

You should write

<input type="button" value="button text" />

instead of

<input type="button">button text</input>

You should rename your function. The function click() is already defined on a button (it simulates a click), and gets a higher priority then your method.

Note that there are a couple of suggestions here that are plain wrong, and you shouldn't spend to much time on them:

Do not use onclick="javascript:myfunc()". Only use the javascript: prefix inside the href attribute of a hyperlink: <a href="javascript:myfunc()">.
You don't have to end with a semicolon. onclick="foo()" and onclick="foo();" both work just fine.
Event attributes in HTML are not case sensitive, so onclick, onClick and ONCLICK all work. It is common practice to write attributes in lowercase: onclick. note that javascript itself is case sensitive, so if you write document.getElementById("...").onclick = ..., then it must be all lowercase.

edited Mar 28 '11 at 05:28

answered Mar 28 '11 at 03:25

Elian Ebbing

17,427
5
43
54

1

this is just a sample script im writing on my Windows 95 with IE5 so i'm not using any DOM stuff because i don't know how well it's supported. I will try that out though. Thanks – Nate Koppenhaver Mar 29 '11 at 19:17
yeah i just had to change the name of my function and it worked. Thanks again! i was really stuck – Nate Koppenhaver Mar 31 '11 at 01:15
@ElianEbbing Thanks for taking the time to explain a few of these things... as small as they are, they really helped me understand what I was doing wrong. – Louie Aug 28 '14 at 00:38
@ElianEbbing http://jsfiddle.net/hiteshbhilai2010/gs6rehnx/4/ .... could you see this it has same problem – Hitesh Oct 12 '14 at 20:32
1

@hitesh No, this is a different problem: JSFiddle puts all the javascript code within `$(window).load(function() { ... })`. This means that `test()` is not globally accessible. If you change the dropdown on the left from `onLoad` to `No wrap` then your example should work in JSFiddle. – Elian Ebbing Oct 13 '14 at 08:39
thanks that worked : one more question -- are we not supposed to use document.ready in jsfiddle? – Hitesh Oct 13 '14 at 10:56
I had same problem using a function called "submit()". Changing name worked. – phatmann Jun 14 '18 at 22:59

score 16 · Answer 2 · answered Jul 22 '11 at 12:52

16

click() is a reserved word and already a function, change the name from click() to runclick() it works fine

answered Jul 22 '11 at 12:52

Jimmy Rousseau

161
1
2

score 3 · Answer 3 · edited Dec 12 '18 at 23:44

3

Check you are calling same function or not.

<script>function greeting(){document.write("hi");}</script>

<input type="button" value="Click Here" onclick="greeting();"/>

edited Dec 12 '18 at 23:44

Lopsided

3,681
1
23
43

answered Dec 14 '17 at 08:12

user3669026

131
1
5

score 3 · Answer 4 · answered Mar 28 '11 at 02:07

3

Try this

<input type="button" onClick="return click();">button text</input>

answered Mar 28 '11 at 02:07

Nathanphan

925
1
10
23

score 0 · Answer 5 · answered Dec 09 '12 at 11:40

0

I suggest you do: <input type="button" value="button text" onclick="click()"> Hope this helps you!

answered Dec 09 '12 at 11:40

Kyle Gagnon

62
1
8

1

I think the issue is his 'onclick' property, not the way the text value is displayed. – Sidd Menon Jul 30 '15 at 16:05

score 0 · Answer 6 · answered Jul 16 '16 at 15:43

<script>
//$(document).ready(function () {
function showcontent() {
        document.getElementById("demo22").innerHTML = "Hello World";
}
//});// end of ready function
</script>

I had the same problem where onclick function calls would not work. I had included the function inside the usual "$(document).ready(function(){});" block used to wrap jquery scripts. Commenting this block out solved the problem.

score 0 · Answer 7 · answered Aug 02 '16 at 03:57

0

Yes you should change the name of your function. Javascript has reserved methods and onclick = >>>> click() <<<< is one of them so just rename it, add an 's' to the end of it or something. strong text`

answered Aug 02 '16 at 03:57

Jerry Noel

1
1

score 0 · Answer 8 · answered May 16 '17 at 03:31

0

Today this also happened to me. The function name maybe conflicts with keywords. My case is scrape(). I change the function name, everything works fine.

answered May 16 '17 at 03:31

lover summer

13
1
4

score 0 · Answer 9 · answered Mar 28 '11 at 01:59

0

Try fixing the capitalization. onclick instead of onClick

Reference: Mozilla Developer Docs

answered Mar 28 '11 at 01:59

Wylie

1,034
1
12
20

Your link is a XUL link. This is what you want: https://developer.mozilla.org/en/DOM/element.onclick – Mar 28 '11 at 02:01
1

Thank you, I have fixed that link. – Wylie Mar 28 '11 at 02:03
2

all capitalizations work, the browser shouldn't care if it's onClick, ONCLICK, onclick, Onclick, or anything else. i prefer camel notation, so i use that – Nate Koppenhaver Mar 31 '11 at 01:17
You're right. Javascript is case sensitive, which may be the source of my confusion. – Wylie Mar 31 '11 at 13:52
even the doc on mdn is use all lowercase, you write your confusion on other people question, that's not good – Adi Prasetyo Aug 14 '17 at 05:45

score 0 · Answer 10 · answered Jan 10 '21 at 17:03

0

One possible cause for an item not responding to an event is when the item is overlapped by another. In that case, you may have to set a higher z-index for the item you wish to click on.

answered Jan 10 '21 at 17:03

ytobi

480
1
8
19

onclick event function in JavaScript

10 Answers10

Linked