seanlim Posted November 17, 2010 Share Posted November 17, 2010 Good day all, I don't usually need help with Javascript, but my head's getting messed up after working for hours... I am trying to attach an event handler dynamically to an <A> object, while at the same time attaching a variable to be passed when the event is triggered. The example below illustrates the problem: I have a counter that increments every second. Below it, I have a link that attaches a new onclick event handler when the mouse hovers over. When the link is clicked, it is supposed to show the counter value when the event handler was attached. e.g. when the counter shows 3, i hover my mouse over the link. when the counter shows 5, i click the link. ideally, the alert will show "3", but it currently shows "5" <html> <script type="text/javascript"> var n = 0; function updateTimer() { n++; document.getElementById('counter').innerHTML = n; } setInterval("updateTimer()", 1000); function attachEventHandler(link) { link.onclick = function(){alert("Counter was "+n+" when onclick handler was attached");return false;} } </script> <body> <div id="counter"></div> <a href="" onmouseover="attachEventHandler(this);">link</a> </body> </html> i understand the logic as to why it shows "5", but how can i make it show 3? I've tried the following but they don't/won't work: 1. Wrapper/Anonymous Functions. it isn't much help since the function is executed only when the event is triggered. 2. eval to a function. link.onclick = eval("function(){alert('"+n+"')}"); 3. using setAttribute("onclick", ...) . this works in FF, but not in IE (i need to support IE too!). a working example in FF is: link.setAttribute("onclick", "alert('"+n+"')"); 4. storing the value as a global variable. in my actual page, i'm attaching many more event handlers and it would be quite a mess to be storing global variables for each handler. Any help's appreciated! Quote Link to comment https://forums.phpfreaks.com/topic/218966-dynamic-attachment-of-event-handlers/ Share on other sites More sharing options...
Adam Posted November 17, 2010 Share Posted November 17, 2010 What you're trying to do doesn't make sense. Every time you hover over the element you're going to reassign the onclick event, using the current value of n. Quote Link to comment https://forums.phpfreaks.com/topic/218966-dynamic-attachment-of-event-handlers/#findComment-1135616 Share on other sites More sharing options...
seanlim Posted November 17, 2010 Author Share Posted November 17, 2010 What you're trying to do doesn't make sense. Every time you hover over the element you're going to reassign the onclick event, using the current value of n. That is exactly what i'm trying to achieve!!! I want the current value of n to be "assigned" to the function (for a lack of a better description) But it's okay, I've solved it by using the Function object. For the benefit of anybody interested: link.onclick = new Function('alert("Counter was '+n+' when onclick handler was attached");return false;'); The Function object allows a string to be "converted" to a function without the need for eval! Awesome. Thanks for the help anyway! Quote Link to comment https://forums.phpfreaks.com/topic/218966-dynamic-attachment-of-event-handlers/#findComment-1135618 Share on other sites More sharing options...
Adam Posted November 17, 2010 Share Posted November 17, 2010 Ahhh, sorry. I misread what it was you were trying to do. Incidentally you could also have done this with a closure: (function(n) { link.onclick = function() { alert("Counter was "+n+" when onclick handler was attached"); return false; } })(n); Quote Link to comment https://forums.phpfreaks.com/topic/218966-dynamic-attachment-of-event-handlers/#findComment-1135622 Share on other sites More sharing options...
seanlim Posted November 17, 2010 Author Share Posted November 17, 2010 Interesting... I'll look into closures too. Thanks for the help again, much appreciated! Quote Link to comment https://forums.phpfreaks.com/topic/218966-dynamic-attachment-of-event-handlers/#findComment-1135624 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.