Change onclick Event of an Element Using JavaScript

Although usually it’s not required but sometimes you may want to change the onClick event of a DOM element using JavaScript. When you click on a Document Object Model (DOM) element, it fires an onclick event. We can capture this event in JavaScript and execute a piece of code. In JavaScript, onclick event expects a function as parameter. This function will be executed when the event occurs. Let’s see how we can change the function to be executed on the fly.

Here is an example link / button code:

<a href="#" id="tButton">click me</a>

Following JavaScript code will capture the onlcik event when a user will click on the button with id “tButton” and call a function called “myFunction”:

document.getElementById("tButton").onclick = function() {myFunction()};

function myFunction(){
alert("myFunction called");
}

The onclick property expects a function and NOT a string –so the following code will not work:

document.getElementById("tButton").onclick = "b()";

I hope this was of help to you. Please let me know if you have any question about this topic. I will try to help! Thank you for using TechWelkin!