✕
Share it

Contact me
iPhone / iPad

Tools

Hindi Proof Reader Top Tech Blogs in India QR Code Generator
Make Money Online Earn from Blogging More Tools MS-Excel MS-Word AdSense About Lalit Contact us
TechWelkin Site Logo

TechWelkin

Tips and Tutorials on Computers, Mobiles and Internet

Last updated: 9 July 2015

Change onclick Event of an Element Using JavaScript

October 5, 2011 By Lalit Kumar 2 Comments

Learn how to dynamically change the onclick event of an HTML element using JavaScript code. This on the fly modification is not all the difficult!




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!

Related Articles for More Information:

  1. AJAX: Passing Parameters To onreadystatechange Function
  2. Walking DOM Tree is Now Very Simple
  3. Get Full Current URL from Address Bar
Last updated: 9 July 2015 | Published on: 5 October 2011 | Authored and Edited by: Lalit Kumar and Team | Filed as: Home » Programming » Web development » JavaScript » Change onclick Event of an Element Using JavaScript

Filed Under: JavaScript

Lalit Kumar is the Principal Author and Founder of TechWelkin. He is a web explorer and he enjoys finding useful information on the Internet. He loves to put things together to create a bigger solution. Lalit is passionate about technology, languages and literature. You can contact Lalit via email (techwelkin [at] gmail [dot] com) or Facebook (facebook.com/techwelkin).

Comments

  1. Pete says

    July 8, 2015 at 5:53 pm

    Clicking on “click me” does nothing. Looking at the page’s source code, I don’t see where the functions are even defined. And it seems to be rather incomplete. I tried to create a webpage using the code shown, and it doesn’t work. What’s missing?

    Reply
    • Lalit Kumar says

      July 9, 2015 at 5:00 am

      Hi Pete, thanks for the comment. I have updated the code. If you want to execute two different functions in alternating fashion, you may use a toggle variable. If this variable would be set to 1, function abc will execute. And if the variable would be set to 0, function xyz will execute.

      Reply

Leave a Reply Cancel reply

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

banner of the book 'Vitamin Zindagi'

Recent Stories

  • Cool Instagram Usernames for Girls and Boys
  • Best Custom Robots.txt File for Blogger/Blogspot
  • Check Ticket Confirmation PNR Status on WhatsApp
  • Easily Capture Screen and Do Recording on iPhone / iPad
  • Consistent Video Upload is Important for YouTube Channel
  • Conditions for YouTube Channel Monetization
  • How to Get Your First 100 and 1000 Subscribers on YouTube
  • What is the Average Audience Retention for YouTube Channels?

Tools

  • Hindi Proof Reader
  • Top Tech Blogs in India
  • QR Code Generator
  • Random Word Generator
  • Strong Password Generator
  • Trace Mobile Numbers

Connect with us

  • Facebook
  • Google+
  • Twitter
  • LinkedIn
  • Pinterest
  • RSS Feed

© 2007-2019 TechWelkin.
The content is copyrighted to Lalit Kumar and may not be reproduced on other websites.
TechWelkin displays Google AdSense ads. See how Google uses data when you're on TechWelkin | Privacy Policy