59

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Nate Koppenhaver
  • 1,676
  • 3
  • 21
  • 31
  • 1
    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
  • 1
    I think you need a semicolon after the function like this: `button text` – emco Mar 28 '11 at 02:03
  • 1
    Try... `onclick="javascript:click();"` – Dejan Marjanović Mar 28 '11 at 02:05
  • 12
    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

10 Answers10

122

Two observations:

  1. You should write 

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

    instead of

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

  2. 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.
Elian Ebbing
  • 18,779
  • 5
  • 48
  • 56
  • 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
17

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

Jimmy Rousseau
  • 171
  • 1
  • 2
3

Check you are calling same function or not.

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

<input type="button" value="Click Here" onclick="greeting();"/>
Ross Brasseaux
  • 3,879
  • 1
  • 28
  • 48
user3669026
  • 141
  • 1
  • 6
3

Try this

<input type="button" onClick="return click();">button text</input>
Nathanphan
  • 947
  • 2
  • 11
  • 23
0

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

Kyle Gagnon
  • 62
  • 1
  • 8
0
<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.

Tony
  • 1
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`

Jerry Noel
  • 1
  • 1
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.

lover summer
  • 43
  • 1
  • 7
0

Try fixing the capitalization. onclick instead of onClick

Reference: Mozilla Developer Docs

Wylie
  • 1,054
  • 2
  • 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
  • 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
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.

ytobi
  • 535
  • 1
  • 9
  • 19