onclick event not working in JavaScript
-
12-11-2019 - |
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?
Thanks
Solution
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.
OTHER TIPS
click() is a reserved word and already a function, change the name from click() to runclick() it works fine
Try this
<input type="button" onClick="return click();">button text</input>
Check you are calling same function or not.
<script>function greeting(){document.write("hi");}</script>
<input type="button" value="Click Here" onclick="greeting();"/>
Try fixing the capitalization. onclick
instead of onClick
Reference: Mozilla Developer Docs
I suggest you do:
<input type="button" value="button text" onclick="click()">
Hope this helps you!
<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.
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`
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.