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>
Alternatively, if you're not using jQuery:
document.getElementById('forgotpass').onclick = forgotpass;
document.getElementById('forgotpass').onclick = forgotpass(); but you pointed out that the brackets should not be included- thanksPure 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();
});
});
$("#forgotpass").off().on('click', function () { forgotPass(); });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.
You can do it with jQuery like
$("#forgotpass").click(function() {
alert("Handler for .click() called.");
});
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();
});
});
addEventListener over onclick is backed up by developer.mozilla.org/en-US/docs/Web/API/EventTarget/… which describes why: unlike onclick, addEventListener can capture the event as it gets passed down the DOM, prevent it from bubbling back up the DOM, and can be used to add multiple event handlers.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>
...
<div>
<input type="button" value="Set Cookie" onclick="setCookie();" />
</div>
<script>
function setCookie() {
console.log('ready to set cookie?');
}
</script>
...
Good Luck!
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();
});
