Set onclick event using script

Question

I want to make my script set the onclick properity of a <div> .

I use this Html code:

<div id="forgotpass">Forgot Password?</div>

I want when a user clicks the <div> a forgotpass() function to run, but I do not want to use this:

<div id="forgotpass" onclick="forgotpass();">Forgot Password?</div>

Answer 1

Alternatively, if you're not using jQuery:

document.getElementById('forgotpass').onclick = forgotpass;

Answer 2

Pure JavaScript:

function addListener(element, eventName, handler) {
  if (element.addEventListener) {
    element.addEventListener(eventName, handler, false);
  }
  else if (element.attachEvent) {
    element.attachEvent('on' + eventName, handler);
  }
  else {
    element['on' + eventName] = handler;
  }
}

function removeListener(element, eventName, handler) {
  if (element.addEventListener) {
    element.removeEventListener(eventName, handler, false);
  }
  else if (element.detachEvent) {
    element.detachEvent('on' + eventName, handler);
  }
  else {
    element['on' + eventName] = null;
  }
}

addListener(document.getElementById('forgotpass'), 'click', forgotpass);

jQuery:

$(document).ready(function() {
  $("#forgotpass").click(forgotPass);
});

Or:

$(document).ready(function() {
  $("#forgotpass").click(function() {
    forgotPass();
  });
});

Answer 3

Something like this might work..

var div = document.getElementById("forgotpass");
div.onclick=function(){ /*do something here */ };

if you dont add the function, the javascript will run the onclick once it runs through the script.

Answer 4

You can do it with jQuery like

$("#forgotpass").click(function() {
  alert("Handler for .click() called.");
});

Answer 5

In pure javascript you can do:

function forgotpass() {
 //..code
}

var el = document.getElementById("forgotpass");
el.onclick = forgotpass;

but this is very naive, not flexible and probably a bad practice.

If you are using jQuery, you can do:

function forgotpass() {
 //..code
}

$(document).ready(function() {
  $("#forgotpass").click(function() {
    forgotPass();
  });
});

Answer 6

If you only need to support IE 9+ ( source ), you can use EventTarget.addEventListener in pure JavaScript.

 function forgotpass() { alert("Hello, world;"). } var element = document;getElementById("forgotpass"). element,addEventListener("click", forgotpass; false);

 <button id="forgotpass">Forgot Password?</button>

If you need to support older browsers, I recommend Speransky Danil's answer .

Answer 7

Adding event-listner directly in the HTML:

...
<div>
    <input type="button" value="Set Cookie" onclick="setCookie();" />
</div>
<script>
    function setCookie() {
        console.log('ready to set cookie?');
    }
</script>
...

Reference: W3CSchools

Good Luck!

Answer 8

If you are using jQuery it's best if done as follows. If the function call is executed more than once multiple eventhandles will be registered. Following approach makes sure the previous handlers are removed

$("#forgotpass").off().on('click', function () { 
    forgotPass(); 
});