Converting function to event listener

[Gandalf]

I have a JS function I’m trying to make into an event listener. I had help with a similar problem a while ago and have successfully converted a few functions since then.

This one is complicated by the fact that (a) there are variables that are used both within the function and outside it, and (b) there are 78 different id’s that can trigger the event. I have made a stab at it but I’m not sure how close I am to a solution…

HTML (from which I will remove the onclicks, and eventually the anchor tags altogether):

<li id="p0"><a href="#" onclick="choosecard(0);return false;"><img src="images/spacer.gif" alt="card0" height="99" width="66"></a></li>
<li id="p1"><a href="#" onclick="choosecard(1);return false;"><img src="images/spacer.gif" alt="card1" height="99" width="66"></a></li>
...
<li id="p77"><a href="#" onclick="choosecard(77);return false;"><img src="images/spacer.gif" alt="card77" height="99" width="66"></a></li>

Original JS:

function choosecard(cardno) {
  if ( jobdone ) {
    return;
  } else {
    document.getElementById('p'+cardno).innerHTML = '<img src="images/selected.jpg" alt="card selected">';
    document.getElementById('f'+ns).value = cards[cardno];
    ns++;
    if ( ns == maxcards ) {
      jobdone = true;
      document.getElementById("showcards").disabled = false;
    }
  }
}

Revised JS:

var ns = 0;
var jobdone = false;

(function(){
  var pcardno = 'p'+cardno;
  var fns = 'f'+ns;
  addEventListener('click', function() {
    if ( jobdone ) {
      return;
    } else {
      document.getElementById(pcardno).innerHTML = '<img src="images/selected.jpg" alt="card selected">';
      document.getElementById(fns).value = cards[cardno];
      ns++;
      if ( ns == maxcards ) {
        jobdone = true;
        document.getElementById("showcards").disabled = false;
      }
    }
  }, false);
})();

[felgall]

@Gandalf

there are 78 different id’s that can trigger the event

If all of those are in the one list then you’d probably do better to attach just the one listener to the entire list and then work out which element actually triggered it from inside the code that gets run when it is triggered.

[Gandalf]

@felgall

If all of those are in the one list then you’d probably do better to attach just the one listener to the entire list and then work out which element actually triggered it from inside the code that gets run when it is triggered

I was wondering whether that’s what I needed. Each id is attached to a list item, p0 to p77. How to tell which id triggered it?

[Mittineague]

I think event target might help you with this. eg.

for (var i = 0; i < button_count; i++) {
 buttons[i].addEventListener('click', function(evt) {
   switch_style(evt.target.value);
 }, false);

[Gandalf]

Cool, thanks, @Mittineague. I assume the switch_style() was just an example of what I might do - not actually something I want in this context?

[Mittineague]

@Gandalf

switch_style() was just an example of what I might do

Yes, I just did a quick copy-paste of some code I had. I didn’t mean to add confusion, only to show how “event.target” can be used.

[Gandalf]

Thanks, I’ll give that a go. Don’t worry, I get confused easily!

[felgall]

@Mittineague

I think event target might help you with this.

You don’t need to attach it to every <li> to do that though - attaching one listener to the <ul> or <ol> would be sufficient. The evt.target would then identify which <li> within the list was clicked.

[Gandalf]

@felgall

You don’t need to attach it to every <li> to do that though

Ah, that’s interesting , thanks. Looking at what I have though I’m not sure what I have attached the listener to.