Drongo_III Posted May 21, 2013 Share Posted May 21, 2013 (edited) 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 Edited May 21, 2013 by Drongo_III Quote 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); Quote 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 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? Quote 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. Quote 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 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/ Quote 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. Quote 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 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; } 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 Quote Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/#findComment-1431899 Share on other sites More sharing options...
Solution kicken Posted May 23, 2013 Solution Share Posted May 23, 2013 mylink = document.getElementById('link1'); //^ alert(mylink.id); myLink.onclick = myFunc; //^ CaSe SeNsEtIvE Quote 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 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! Quote Link to comment https://forums.phpfreaks.com/topic/278250-traditional-event-model-puzzled/#findComment-1431919 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.