onClick() Event is very popular in JavaScript. onClick event is simply used to fire an action, execute code or call a function when the specified HTML element is clicked. This HTML element is generally a button but it can be also ahead, iframe, label element, etc. onClick() event is supported by all major browsers like Google Chrome, Microsoft Edge, Internet Explorer, Mozilla Firefox, Opera, Safari.
onClick() Syntax
onClick event has very simple syntax where the action, JavaScript code or function will be assigned.
<ELEMENT onclick="SCRIPT">
- `ELEMENT` is the HTML element where the given onclick event will be attached. ELEMENT is generally a button or similar type element where the user will click on it.
- `SCRIPT` is a JavaScript code which can be a single or multiple statements or a function call.
Call Function with onClick()
We will start with a very popular example where we will call an already defined function with the onClick() event. The function is named as Say_Hello() which will simply print a salute. We will just provide the function name to the onClick() event.
<html>
<body>
<button onclick="Say_Hello()">Click on this text!</button>
<script>
function Say_Hello() {
alert("Hello Poftut.com");
}
</script>
</body>
</html>
Run Code Inside onClick()
onClick() event can also run a JavaScript code directly without calling any function. This code can be a single statement or multiple statements. In this example, we will run the alert function and make some calculations.
<html>
<body>
<button onclick="alert('Hello Poftut.com')">Click on this Button To Say Hello</button>
<button onclick="alert('Hello Poftut.com');">Click on this Button To Say Hello</button>
<button onclick="a=1;b=2;alert(a+b);">Click on this Button To Make Calculations</button>
</body>
</html>
If we will use multiple statements in a onClick() event we have to delimit the statements with ;. But if there is a single statement ; is optional where we can use or not.
Provide Parameter To Function with onClick()
We can also provide some parameters to the function which is called with the onClick() event. We will just call the function and put the parameters inside the brackets. In this example, we will provide the name parameter to the Say_Hello() function.
<html>
<body>
<button onclick="Say_Hello('Poftut.com')">Click on this Button To Say Hello</button>
<script>
function Say_Hello(name) {
alert('Hello '+name);
}
</script>
</body>
</html>
Set onClick() Event By Using HTML DOM Object
Up to now, we have used a simple element attribute way for the onClick() event. We can also use HTML DOM in order to set a function or code for a specific HTML element for the click event. We will set the elements DOM object onclick attribute. In this following example, we will set the Say_Hello() function for the button element by using HTML DOM.
<html>
<body>
<button id="mybutton" > Say Hello</button>
<script>
function Say_Hello() {
alert("Hello Poftut.com");
}
document.getElementById("mybutton").onclick=Say_Hello;
</script>
</body>
</html>
Remove onClick() Event By Using HTML DOM Object
We can also remove the onClick() event assignment by using the HTML DOM Object. We will just set the onclick attribute of the element to the null object which will remove the existing assignment. In this example we will remove the mybutton HTML element onClick() event like below.
document.getElementById("mybutton").onclick="";
Set onClick() Event By Using addEventListener() Function
Some HTML elements provides the addEventListener() function in order to add event to the given HTML element. We will just get the object of the HTML element and use addEventListener() function with the event name and the code we can to assign. The onClick() event is named as click for the addEventListerner(). We will also provide some JavaScript code or a function which is Say_Hello() function.
<html>
<body>
<button id="mybutton" > Say Hello</button>
<script>
function Say_Hello() {
alert("Hello Poftut.com");
}
document.getElementById("mybutton").addEventListener("click",Say_Hello);
</script>
</body>
</html>
Remove onClick() Event By Using addEventListener() Function
We can also use the addEvenListener() function in order to remove existing click event code or function. We will just empty string for code or function parameter like below.
document.getElementById("mybutton").addEventListener("click","");
`element.addEventListener(‘click’, ”)` doesn’t remove an event listener. In fact, it is invalid since the second parameter must be a function. To remove an event handler you have to use `element.removeEventListener(event, handler)`, for example: `el.removeEventListener(‘click’, handleClick)`.