onclick event function in JavaScript

dom-events, event-driven, html, javascript

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

Problem

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?

Original source