pass through current target name to function

Question

I'd like to dynamically create event listeners for multiple buttons, and subsequently, show a particular frame label depending on the button clicked, but I'm unsure what to pass through (FYI, this is will be used for HTML5 canvas in Flash CC, but principally the same should apply to a web page for showing divs etc). I currently have this:

var butTotal = 4;
var selfHome = this;

function createListeners () {
    for (var i=0; i<butTotal; i++) {
        selfHome["btn" + i].addEventListener('click', openPop);
    }
}

function openPop () {
    alert("test");
    selfHome.gotoAndPlay("pop"+event.currentTarget.name.substr(3));
}

createListeners();

It creates the listeners fine, but I don't really know where to start with passing through the current button instance name to tell it which frame label to gotoAndPlay.

Maybe this is it, `event` will be automatic in Chrome, however, in Firefox (others?) you will have to add that to openPop, like this `openPop(event)`, see here: http://jsfiddle.net/te54E/2/ — Smern, Feb 03 '14 at 17:14

score 0 · Answer 1 · answered Feb 03 '14 at 17:03

0

Based on the code that you have, I'd simply change the .addEventListener() to call a generic function (rather than openPop, directly), and pass it the reference to the button. So, this:

selfHome["btn" + i].addEventListener('click', openPop);

. . . would become this:

selfHome["btn" + i].addEventListener('click', function() {
    openPop(this);
});

At that point, you would then have to update openPop to accept a parameter for the reference to the element that triggered it . . . something like:

function openPop (currentButton) {

At that point, you could reference the clicked button, by using currentButton in the openPop logic.

answered Feb 03 '14 at 17:03

talemyn

7,822
4
31
52

event will get passed automatically, currentTarget can be obtained from the event. it must be another issue, see my comment – Smern Feb 03 '14 at 17:08
I was actually just going to respond with, pretty much, your second comment that you just posted in the OP . . . your approach would work as well, but only if you specified the event as a parameter in `openPop`. Either way should be fine. – talemyn Feb 03 '14 at 17:17
I see, well the anonymous function is unnecessary... but it would work as well I suppose. Here is a fiddle for you: (http://jsfiddle.net/te54E/3/). My first assumption (still curious) is that `selfHome` doesn't contain all that the OP believes it does. – Smern Feb 03 '14 at 17:23
Thanks . . . I can't get to JSFiddle from work. :) The main reason that I prefer the anonymous function approach, is that it allows for passing other parameters in to the function more easily. The `event` approach, relies on there never being any other variables, which reduces flexibility a little, IMO. – talemyn Feb 03 '14 at 17:29

score 0 · Answer 2 · answered Feb 03 '14 at 17:05

I'm not sure I totally understand your question. However if you just need to pass the button instance (in you case "selfHome["btn" + i]") you could call an anonymous function in your event handler which calls openPop() with the button instance as an arugment. Would this work for you?

var butTotal = 4;
var selfHome = this;

function createListeners () {
    for (var i=0; i<butTotal; i++) {
         var currentBtn = selfHome["btn" + i];
        currentBtn.addEventListener('click', function(){openPop(currentBtn);} );

    }
}

function openPop (btn) {
    alert("test");
    selfHome.gotoAndPlay(/*use button instance 'btn' to find frame*/);    
}
createListeners();

This would actually show every button being the last button. Because `currentBtn` would get updated to the last button in the loop. Then when it actually gets called (no matter which button is pressed) it will pass the value of the last. http://jsfiddle.net/te54E/6/. passing `this` instead will fix it: http://jsfiddle.net/te54E/7/ — Smern, Feb 03 '14 at 17:32

score 0 · Answer 3 · answered Feb 03 '14 at 17:09

When the event is triggered the this keyword inside the handler function is set to the element is firing the event EventTarget.addEventListener on MDN. If the button have the data needed to be retrieved just get it from the this keyword:

function openPop (btn) {
    alert(this.name);
    /* ... */
}

Smern · Answer 4 · 2014-02-03T18:56:08.203

It looks like you expect it to contain the function gotoAndPlay() as well as the btn elements (which contain both an ID (of btn[number]) and a name with something special at substr(3) (I assume the same as the id). If those things were all true, it should work in chrome... in other browsers you'll need to add event to the openPop() method signature.

function openPop (event) {
    alert("test");
    selfHome.gotoAndPlay("pop"+event.currentTarget.name.substr(3));
}

I believe this is what you are looking for and adding that one word should fix your problem (assuming some things about your dom and what selfHome contains):

JSFiddle

You could also leave out the event from openPop() and replace event.currentTarget with this:

function openPop () {
    alert("test");
    selfHome.gotoAndPlay("pop"+this.name.substr(3));
}

JSFiddle

pass through current target name to function

4 Answers4