Drongo_III Posted May 21, 2013 Share Posted May 21, 2013 Hi Guys I have been a jquery junky for a bit too long and neglected much of the raw javascript behind it...hence this simple question. When I try to register an event in the format of : element.onclick = funcName; the only way I can get this to work is with: document.getElementById('elementId').onclick = myFunc; Whereas if I try and give this event a handle (below) it doesn't work at all and I get an 'undefined' error in console even though it plainly is defined. But surely these two statements amount to exactly the same thing? var someElement = document.getElementById('elementId'); someElement.onclick = myFunc; // This doesn't work So what am i missing? Thanks, Drongo Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/ Share on other sites More sharing options...
codefossa Posted May 21, 2013 Share Posted May 21, 2013 This should work. http://jsfiddle.net/6eJuB/ window.document.querySelector("#elmId").addEventListener("click", myFunc, false); Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/#findComment-1431456 Share on other sites More sharing options...
Drongo_III Posted May 21, 2013 Author Share Posted May 21, 2013 On 5/21/2013 at 10:40 PM, Xaotique said: This should work. http://jsfiddle.net/6eJuB/ window.document.querySelector("#elmId").addEventListener("click", myFunc, false); Thanks for that. But it wasn;t so much that I couldnt get the event to work, or that I couldn't register the event in another way. What I was driving at is to try and understand why it works with document.getElementById but not when I simply use a resource (i.e. set a var with document.getElement... and then assign it to the event). Any ideas why that may be? Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/#findComment-1431459 Share on other sites More sharing options...
.josh Posted May 22, 2013 Share Posted May 22, 2013 The 2nd method does work. I think your issue is somewhere else. Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/#findComment-1431466 Share on other sites More sharing options...
codefossa Posted May 22, 2013 Share Posted May 22, 2013 On 5/21/2013 at 10:51 PM, Drongo_III said: Thanks for that. But it wasn;t so much that I couldnt get the event to work, or that I couldn't register the event in another way. What I was driving at is to try and understand why it works with document.getElementById but not when I simply use a resource (i.e. set a var with document.getElement... and then assign it to the event). Any ideas why that may be? http://jsfiddle.net/6eJuB/1/ Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/#findComment-1431476 Share on other sites More sharing options...
nogray Posted May 22, 2013 Share Posted May 22, 2013 Most likely you tried to call the getElementById before the page loads or before the element is on the page. Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/#findComment-1431673 Share on other sites More sharing options...
Drongo_III Posted May 23, 2013 Author Share Posted May 23, 2013 On 5/22/2013 at 6:51 PM, nogray said: Most likely you tried to call the getElementById before the page loads or before the element is on the page. Perhaps you can point out where i'm doing it wrong? The below code doesn't work. <!doctype html> <html> <head> <script type="text/javascript"> var mylink; function init(){ mylink = document.getElementById('link1'); alert(mylink.id); myLink.onclick = myFunc; } function myFunc(){ alert('click worked'); } </script> </head> <body onload="init();"> <a href="#" id="link1">Click me</a> </body> </html> But if I replace that init function with a direct call to document.getElement (as per below) it works fine. So I am just trying to understand either what I am doing wrong or whether there is some fundamental precept of javascript i am missing (probable)... function init(){ //mylink = document.getElementById('link1'); //alert(mylink.id); document.getElementById('link1').onclick = myFunc; } On 5/22/2013 at 3:08 AM, Xaotique said: http://jsfiddle.net/6eJuB/1/ And thanks for this mate but this is a different type of event registration. I am trying to work out why the traditional model doesnt seem to work for me Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/#findComment-1431899 Share on other sites More sharing options...
kicken Posted May 23, 2013 Share Posted May 23, 2013 On 5/23/2013 at 6:19 PM, Drongo_III said: mylink = document.getElementById('link1'); //^ alert(mylink.id); myLink.onclick = myFunc; //^ CaSe SeNsEtIvE Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/#findComment-1431911 Share on other sites More sharing options...
Drongo_III Posted May 23, 2013 Author Share Posted May 23, 2013 On 5/23/2013 at 7:21 PM, kicken said: CaSe SeNsEtIvE It would be funny if it wasn't so stupid lol... I will go now and lash myself in the garden to twenty minutes. Sowwy! Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/#findComment-1431919 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.