How to give dynamically created buttons actions for each one

Question

Hi, first time posting here. I'm using a loop to create 3 buttons, but my problem is assigning the button actions to each button. My button listener/action code only works on the last button created :(

I tried to target buttons by the name that I gave them ($navButton.name = "button" + i) but that threw up an undefined error for button1.

Any help would be appreciated, I'm an AS3 noob :"(

function createNav(){

    for (var i:Number = 0; i < myXMLArray.length; i++)
    {
     $navButton = new NavButton();
     $navButton.name = "button" +i;
     $navButton.x = i * (SIZE + SPACING);
     $navButton.y = 179;
     addChild($navButton);
     trace("$navButton.name = "+$navButton.name);
     trace("button 1 = "+button1);

        //trying to give the 3 buttons a simple rollover/click action:

     $navButton.buttonMode = $navButton.buttonMode = true;
     $navButton.addEventListener(MouseEvent.MOUSE_UP, navAction);
     $navButton.addEventListener(MouseEvent.ROLL_OVER, function() {$navButton.nextFrame();});
     $navButton.addEventListener(MouseEvent.ROLL_OUT, function() {$navButton.prevFrame();});


        //thought I could control via calling the $navButton.name
     //button1.addEventListener(MouseEvent.MOUSE_UP, navAction);
     //button1.addEventListener(MouseEvent.ROLL_OVER, function() {button1.nextFrame();});
     //button1.addEventListener(MouseEvent.ROLL_OUT, function() {button1.prevFrame();});


     /*var traceText:TextField = new TextField();
     traceText.defaultTextFormat = a12;
     traceText.x = i * (SIZE + SPACING);
     traceText.y = 181;
     traceText.width = 116;
     traceText.height = 20;
     traceText.text = myXMLArray[i].id;
     addChild(traceText);*/
    }

}

function navAction()
{

    trace("click");
}

Answer 1

I would add the buttons to an array ad access as such:

outside of the loop:

var buttons:Array = []

in the loop:

buttons.push(navButton)
buttons[1].addEventListener(MouseEvent.MOUSE_UP, navAction);

This should be done outside of the loop if you are trying to add custom functionality to a single button. Naming the object doesn't give you an object with the instance name. To access it as you have above, you'd need to use:

var button1:NavButton

which would allow you to access as you have done. Using the name property you could use something such as:

if(navButton.name == "button1")
    navButton.addEventListener(Event.BLAHBLAH, DoStuff);

I strongly recommend against using anonymous functions as your event listeners. Instead use named functions and the target property of the event:

function handleButtonClick(event:MouseEvent):void
{
    var button:NavButton = event.target as NavButton;
    if(button)
        button.nextFrame()
}

While it might (probably will) function with the anonymous functions, it will be so much easier to debug if you use named functions.

As an aside, using the $ for your vars is generally bad form in AS3. Here's the Flex SDK Standards, which are excellent conventions for all AS3 programming.