onclick to fire class method or eventlistener

[astralaaron]

I am trying to figure out how I can get the id of my links so I can set an eventListener on them. something else that would help me is if someone can tell me how I can use functions within my javascript class from the document, like this:

<a onclick="myclass.mymethod()"> execute my class method</a>

I cant find info on this.. I tried. document.myclass.mymethod() and myclass.mymethod() and just mymethod() I think this would be better anyway if I can just figure out how to get the ID off of these links in the loop below so I can add an eventListener

this.setLinks = function(){  for (var i = 0; i < document.links.length; i++) {  var link = document.links[i];  var linkText = link.text;   alert(linkText);  alert(link.this);     /*   switch(linkText)   {    case 'edit':	 link.addEventListener("mouseDown",function { alert('testing ' + i ); }, false);    break;      default: alert('default'); break;   }   */    }   return true; }

[thescientist]

this.setLinks = function(){  var links = document.getElementsByTagName('a');   for (var i = 0, l = links.length; i < l; i++) {    var link = links[i];    var id = link.id;     console.log(link);    console.log(id);       switch(id){      case 'edit':        link.addEventListener("mouseDown",myclass.mymethod, false);        break;        default:        console.log('default');        break;    }  }};

I'm not sure if I fully get your requirements, however

[astralaaron]

all I am really trying to do is get the id.. I did try link.id it came back blank that is why I am confused] edit: oh I see you are doing this differently var links = document.getElementsByTagName('a');I read that is not cross browser which is why I did the document.links[] I will give your way a try thanks

[thescientist]

all I am really trying to do is get the id.. I did try link.id it came back blank that is why I am confused]

did you actually give your elements an ID?

edit: oh I see you are doing this differentlyvar links = document.getElementsByTagName('a'); I read that is not cross browser which is why I did the document.links[] I will give your way a try thanks

use DOM methods, that's what they are there for. https://developer.mo...ementsByTagName

[astralaaron]

this.setLinks = function(){  var links = document.getElementsByTagName('a');    for (var i = 0, l = links.length; i < l; i++) {	  var link = links[i];	  var id = link.id;	  var text = link.text;  	 console.log(link); //is this necessary?	 console.log(id);	    alert(id + text);    var ie = document.getElementById(id); // always null?  alert(ie);  // var ieText = ie.innerHTML;     }   return true; }

Hey Scientist thanks, well, it seems to get the ID both on IE and Mozilla. But the link.text only works on mozilla. So I figured I would just use the ID that I have to and grab the innerHTML of the link but the problem I am having now.. even though I have the ID of the links, when I do document.getElementById(id) it is null

[justsomeguy]

link is the link element, you can use link.innerHTML. There's no reason to get the ID and get the same element again.

[thescientist]

Hey Scientist thanks, well, it seems to get the ID both on IE and Mozilla. But the link.text only works on mozilla.

I never used the text attribute, just innerHTML, since that is the spec, and works in all browsers.

So I figured I would just use the ID that I have to and grab the innerHTML of the link but the problem I am having now.. even though I have the ID of the links, when I do document.getElementById(id) it is null

You shouldn't have to get the reference all over again though, you already have it at the top of the loop.

var link = links[i];var text = link.innerHTML;

i only logged link because you were in your original post

alert(link.this)

logging's just there to help, and make sure your values are what you think they are. you can get rid of them once things work or you don't need them anymore. You be able to confirm that each element you are getting in the nodeList is what you expect, with all the attributes and innerHTML you need.

[astralaaron]

I see where I was confused now. I hadn't used getElementByTagName before I did not relate it to getElementById. now I see they both get the element. thanks for clearing that up for me I was boggled there for a minute.

[astralaaron]

I keep running into new problems

this.setLinks = function(){  var links = document.getElementsByTagName('a');   for (var i = 0, l = links.length; i < l; i++) {	  var link = links[i];	  var id = link.id;	  var text = link.innerHTML;  	  switch(text){		 case 'edit':		   // alert(id);			 link.addEventListener("mousedown", function() { that.logHidden(id); }, false);   break;  		  default:		   console.log('default');   break;	  }  }   return true; }   this.logHidden = function(i){  alert(' test logHidden ' + i);  /*   that.hiddenTitle = that.VAL('title'  + i );   that.hiddenDescription = that.VAL('description' + i );   that.hiddenKeywords = that.VAL('keywords' + i );				 */  return true;}

everything in my test is working perfect besides one thing, there are 4 edit links on the page I am testing right now and when the 'edit' case of the switch is hit, the alert puts out 0, 1, 2, and then 3when I click any of the 4 edit links it alerts 'test logHidden 3' so it is like all of the edit links are taking on the last event handler set... I hope I said that so it makes sense. am I doing something wrong that is obvious? I have tried creating an array of the event handlers and it had the same result, I am out of ideas already though

[thescientist]

i figured that might be the case. you will need to use a closure when creating the event handler.

link.addEventListener('mousedown', function(linkId){   console.log('setting event handler for link id => ' + linkId);   return that.logHidden(linkId);}(id), false);

it's because of the way looping and assigning by reference works in javascript, and that's why id is always the last value from the loop. using a self executing anonymous function, and passing in id, we create a closure and pass in linkId (id). Now linkId will be the specific value at the time that eventListener is defined.https://developer.mozilla.org/en/JavaScript/Guide/Closures

[astralaaron]

I read that entire page it was very interesting. After reading the page and looking through their examples I was just slightly confused with your example.

this.setLinks = function(){  var links = document.getElementsByTagName('a');   for (var i = 0, l = links.length; i < l; i++) {	  var link = links[i];	  var id = link.id;	  var text = link.innerHTML;  	  switch(text){		 case 'edit':			alert(id);			 link.addEventListener("mousedown", function(linkId) {			   alert('event firing');				   return that.logHidden(linkId);			 }(id), false);   break;  		  default:		   console.log('default');   break;	  }  }   return true;}  this.logHidden = function(i){  alert('within logHidden ' + i);   return true;  }

After running the code, it alerts: 'event firing' and then fires off logHidden immediately, and only for the first of the four edit buttons. It is firing the event that shouldn't fire until the button is clicked on I am just realizing. Before posting this reply, I tried this code because after reading that page I didn't understand why you passed a parameter to function() instead of just the second set of ( ) but this had the same result

this.setLinks = function(){  var links = document.getElementsByTagName('a');   for (var i = 0, l = links.length; i < l; i++) {	  var link = links[i];	  var id = link.id;	  var text = link.innerHTML;  	  switch(text){		 case 'edit':			alert(id);			 link.addEventListener("mousedown", function() {  // removed the parameter			   alert('event firing');				   return that.logHidden(id);  // and changed this			 }(id), false);   break;  		  default:		   console.log('default');   break;	  }  }   return true; }  this.logHidden = function(i){  alert('within logHidden ' + i);			return true;}

Since I am seeing that it is firing off the function meant to be fired when the event happens...I am thinking I should move the place that the actual event is set into the closure function.. I am going to see if I can figure that out now, please let me know if it's something else thank you thescientist

[thescientist]

it's simpler, i just overlooked something. you have to use the closure since you are using a loop. this all you should have to do

link.addEventListener("mousedown", function(linkId) {  // you need to maintain the scope/parameter that the closure provides  alert('setting event listener for id => ' + linkId);  return function(){	that.logHidden(linkId);  };}(id), false);

this should work. edit: the only other possible thing I could think of is having to set a local variable for linkId within the return function, but we'll see where this goes first.

[astralaaron]

Great that makes sense

[thescientist]

I'll juice ya up.

[astralaaron]

I'll juice ya up.

hahaha thanks that made my day, cable guy is my favorite flick :] by the way, the code works perfectly now thank you again