Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 557
Nate Koppenhaver Avatar asked Mar 28 '11 01:03

Nate Koppenhaver


People also ask

What is the onclick function in JavaScript?

The onclick event executes a certain functionality when a button is clicked. This could be when a user submits a form, when you change certain content on the web page, and other things like that. You place the JavaScript function you want to execute inside the opening tag of the button.

How does the onclick function work?

The onclick event attribute in HTML works when the user clicks on the button. When the mouse clicked on the element then the script runs. Attribute Value: This attribute contains a single value script that works when the mouse clicked on the element.

What does the onclick event handler do?

What is the onClick handler in React? The React onClick event handler enables you to call a function and trigger an action when a user clicks an element, such as a button, in your app. Event names are written in camelCase, so the onclick event is written as onClick in a React app.

What is the difference between click and onclick in JavaScript?

click is a function on HTML elements you can call to trigger their click handlers: element. click(); onclick is a property that reflects the onclick attribute and allows you to attach a "DOM0" handler to the element for when clicks occur: element.


1 Answers

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.
like image 56
Elian Ebbing Avatar answered Sep 21 '22 13:09

Elian Ebbing