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?

5
  • 1
    Are you getting an error in the console? Can you post the click function. It works for me here
    – qwertymk
    Mar 28, 2011 at 2:00
  • 1
    I think you need a semicolon after the function like this: <input type="button" onClick="click();">button text</input>
    – emco
    Mar 28, 2011 at 2:03
  • 1
    Try... onclick="javascript:click();" Mar 28, 2011 at 2: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, 2011 at 2:15
  • where did you declare/put the click() function? Is it in the right scope?
    – ace
    Mar 28, 2011 at 3:01

10 Answers 10

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.
7
  • 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 Mar 29, 2011 at 19:17
  • yeah i just had to change the name of my function and it worked. Thanks again! i was really stuck Mar 31, 2011 at 1: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, 2014 at 0:38
  • @ElianEbbing jsfiddle.net/hiteshbhilai2010/gs6rehnx/4 .... could you see this it has same problem
    – Hitesh
    Oct 12, 2014 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. Oct 13, 2014 at 8:39
17

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

3

Try this

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

Check you are calling same function or not.

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

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

Try fixing the capitalization. onclick instead of onClick

Reference: Mozilla Developer Docs

4
  • Your link is a XUL link. This is what you want: developer.mozilla.org/en/DOM/element.onclick
    – user1385191
    Mar 28, 2011 at 2: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 Mar 31, 2011 at 1:17
  • You're right. Javascript is case sensitive, which may be the source of my confusion.
    – Wylie
    Mar 31, 2011 at 13:52
  • even the doc on mdn is use all lowercase, you write your confusion on other people question, that's not good Aug 14, 2017 at 5:45
0

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

1
  • 1
    I think the issue is his 'onclick' property, not the way the text value is displayed.
    – Sidd Menon
    Jul 30, 2015 at 16:05
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.

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`

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.

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.