onclick event function in JavaScript
JavascriptHtmlDom EventsEvent DrivenJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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 thejavascript:
prefix inside thehref
attribute of a hyperlink:<a href="javascript:myfunc()">
. - You don't have to end with a semicolon.
onclick="foo()"
andonclick="foo();"
both work just fine. - Event attributes in HTML are not case sensitive, so
onclick
,onClick
andONCLICK
all work. It is common practice to write attributes in lowercase:onclick
. note that javascript itself is case sensitive, so if you writedocument.getElementById("...").onclick = ...
, then it must be all lowercase.
Solution 2 - Javascript
click() is a reserved word and already a function, change the name from click() to runclick() it works fine
Solution 3 - Javascript
Try this
<input type="button" onClick="return click();">button text</input>
Solution 4 - Javascript
Check you are calling same function or not.
<script>function greeting(){document.write("hi");}</script>
<input type="button" value="Click Here" onclick="greeting();"/>
Solution 5 - Javascript
Try fixing the capitalization. onclick
instead of onClick
Reference: Mozilla Developer Docs
Solution 6 - Javascript
I suggest you do:
<input type="button" value="button text" onclick="click()">
Hope this helps you!
Solution 7 - Javascript
<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.
Solution 8 - Javascript
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`
Solution 9 - Javascript
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.
Solution 10 - Javascript
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.