CODEWITHSUNDEEP
javascripthtmldom-eventsevent-driven
Nate Koppenhaver
Nate Koppenhaver

Reputation: 1702

onclick event function in JavaScript

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?

Upvotes: 59

Views: 340165

Answers (10)

ytobi
ytobi

Reputation: 673

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.

Upvotes: 0

user3669026
user3669026

Reputation: 141

Check you are calling same function or not.

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

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

Upvotes: 3

lover summer
lover summer

Reputation: 43

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.

Upvotes: 0

Jerry Noel
Jerry Noel

Reputation: 1

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`

Upvotes: 0

Tony
Tony

Reputation: 1

<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.

Upvotes: 0

Kyle Gagnon
Kyle Gagnon

Reputation: 62

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

Upvotes: 0

Jimmy Rousseau
Jimmy Rousseau

Reputation: 171

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

Upvotes: 17

Elian Ebbing
Elian Ebbing

Reputation: 19027

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.

Upvotes: 122

Nathanphan
Nathanphan

Reputation: 957

Try this

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

Upvotes: 3

Wylie
Wylie

Reputation: 1064

Try fixing the capitalization. onclick instead of onClick

Reference: Mozilla Developer Docs

Upvotes: 0

Related Questions