JavaScript onClick() Event Tutorial with Examples – POFTUT

JavaScript onClick() Event Tutorial with Examples

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

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.

LEARN MORE  How To Get Query String From Url With Javascript?

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.

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.

LEARN MORE  JavaScript "Uncaught TypeError: Cannot set property '...' of null " Error Solutions

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.

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.

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.

LEARN MORE  Hiding Scroll Bar for Internet Explorer, Chrome, Firefox

1 Response

  1. Matías Pizarro says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *