onclick event function in JavaScript

JavascriptHtmlDom EventsEvent Driven

Javascript 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:

  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.

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNate KoppenhaverView Question on Stackoverflow
Solution 1 - JavascriptElian EbbingView Answer on Stackoverflow
Solution 2 - JavascriptJimmy RousseauView Answer on Stackoverflow
Solution 3 - JavascriptNathanphanView Answer on Stackoverflow
Solution 4 - Javascriptuser3669026View Answer on Stackoverflow
Solution 5 - JavascriptWylieView Answer on Stackoverflow
Solution 6 - JavascriptKyle GagnonView Answer on Stackoverflow
Solution 7 - JavascriptTonyView Answer on Stackoverflow
Solution 8 - JavascriptJerry NoelView Answer on Stackoverflow
Solution 9 - Javascriptlover summerView Answer on Stackoverflow
Solution 10 - JavascriptytobiView Answer on Stackoverflow