AS3 array to clean up long code?

Question

I would like a better way to write this possibly using an array but I have been unsuccessful. See my code below. I need to add more details to post this but i can't think of more to say. I suppose I eventually need to have to set up a row of btnA show both B and C simultaneously as well. That would also be helpful.

I have a chart that either turns on a square or turns it off when clicked, for example btn3 toggles the visibility of checkMark3, works as written, but when I have 50 or 60 options of clicking the code is exhausting to write and becomes unruly

btnB1.addEventListener (MouseEvent.CLICK, showB1);
function showB1(event:MouseEvent) {

if (checkMarkB1.alpha == 1){
checkMarkB1.alpha = 0;} else {checkMarkB1.alpha = 1}
}

btnB2.addEventListener (MouseEvent.CLICK, showB2);
function showB2(event:MouseEvent) {

if (checkMarkB2.alpha == 1){
checkMarkB2.alpha = 0;} else {checkMarkB2.alpha = 1}
}

btnB3.addEventListener (MouseEvent.CLICK, showB3);
function showB3(event:MouseEvent) {

if (checkMarkB3.alpha == 1){
checkMarkB3.alpha = 0;} else {checkMarkB3.alpha = 1}
}

btnB4.addEventListener (MouseEvent.CLICK, showB4);
function showB4(event:MouseEvent) {

if (checkMarkB4.alpha == 1){
checkMarkB4.alpha = 0;} else {checkMarkB4.alpha = 1}
}

btnC1.addEventListener (MouseEvent.CLICK, showC1);
function showC1(event:MouseEvent) {

if (checkMarkC1.alpha == 1){
checkMarkC1.alpha = 0;} else {checkMarkC1.alpha = 1}
}

btnC2.addEventListener (MouseEvent.CLICK, showC2);
function showC2(event:MouseEvent) {

if (checkMarkC2.alpha == 1){
checkMarkC2.alpha = 0;} else {checkMarkC2.alpha = 1}
}

btnC3.addEventListener (MouseEvent.CLICK, showC3);
function showC3(event:MouseEvent) {

if (checkMarkC3.alpha == 1){
checkMarkC3.alpha = 0;} else {checkMarkC3.alpha = 1}
}

btnC4.addEventListener (MouseEvent.CLICK, showC4);
function showC4(event:MouseEvent) {

if (checkMarkC4.alpha == 1){
checkMarkC4.alpha = 0;} else {checkMarkC4.alpha = 1}
}

Answer 1

Add all your buttons to an array, and all your checkMarks to another array. Make sure that the order of the items in the array means that the position of each button in the buttons array corresponds with the position of its associated checkMark in the checkMarks array.

//add an event listener to all buttons
for(var i:uint=0; i<buttons.length; i++){ 
  buttons[i].addEventListener(MouseEvent.CLICK, showBox);
}

//showBox function
function showBox(evt:MouseEvent):void{
  for(var a:uint = 0; a<buttons.length; a++){
    if (evt.target == buttons[a]){
      if(checkMark[a].alpha == 1){
        checkMark[a].alpha = 0;
      } else {
        checkMark[a].alpha = 1;
      }
    }
  }
}

This should mean you can just add as many buttons and checkMarks as you like to the array, as long as you add them in the right order and always have a checkMark for every button.

Answer 2

Trex had it I just needed to get it right, this dynamically makes the names and sets the visibility of the check marks. So for a grid that has many check marks to use and turn on and off this is what I ended up with,

import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.DisplayObject;

// The two parameters below will be used to dynamically generate the clipinstance names
var letters: Array = ['A', 'B', 'C', 'D', 'E'];
var index: int = 9;

for (var i: int = 1; i <= index; i++) {

// we keep a reference of the movie clip because the scope is lost in the anonymous event listener
var mc = this;

// instead of setting checkMarkE9.visible = false; we do all of this dynamically
trace('Updating visibility of : ' + 'checkMark' + letters[1] + i);
this['checkMark' + letters[1] + i].visible = false;
trace('Updating visibility of : ' + 'checkMark' + letters[2] + i);
this['checkMark' + letters[2] + i].visible = false;
trace('Updating visibility of : ' + 'checkMark' + letters[3] + i);
this['checkMark' + letters[3] + i].visible = false;
trace('Updating visibility of : ' + 'checkMark' + letters[4] + i);
this['checkMark' + letters[4] + i].visible = false;

// dynamically adding event listeners
this['btn' + letters[0] + i].addEventListener(MouseEvent.CLICK, function (e: MouseEvent) {
    var btnIndex: String = getLastLetter(e.currentTarget.name);
    trace('Updating visibility of : ' + 'checkMark' + letters[1] + btnIndex);
    trace('Updating visibility of : ' + 'checkMark' + letters[2] + btnIndex);
    trace('Updating visibility of : ' + 'checkMark' + letters[3] + btnIndex);
    trace('Updating visibility of : ' + 'checkMark' + letters[4] + btnIndex);
    mc['checkMark' + letters[1] + btnIndex].visible = true;
    mc['checkMark' + letters[2] + btnIndex].visible = true;
    mc['checkMark' + letters[3] + btnIndex].visible = true;
    mc['checkMark' + letters[4] + btnIndex].visible = true;
});

// dynamically add event listeners for cells
this['btn' + letters[1] + i].addEventListener(MouseEvent.CLICK, function (e: MouseEvent) {
    switchVisibility(mc['checkMark' + letters[1] + getLastLetter(e.currentTarget.name)]);
});
this['btn' + letters[2] + i].addEventListener(MouseEvent.CLICK, function (e: MouseEvent) {
    switchVisibility(mc['checkMark' + letters[2] + getLastLetter(e.currentTarget.name)]);
});
this['btn' + letters[3] + i].addEventListener(MouseEvent.CLICK, function (e: MouseEvent) {
    switchVisibility(mc['checkMark' + letters[3] + getLastLetter(e.currentTarget.name)]);
});
this['btn' + letters[4] + i].addEventListener(MouseEvent.CLICK, function (e: MouseEvent) {
    switchVisibility(mc['checkMark' + letters[4] + getLastLetter(e.currentTarget.name)]);
});
}

// switches a display item visiblity
function switchVisibility(display: DisplayObject): void {
display.visible = !display.visible;
}

// get the last letter of a string
function getLastLetter(str: String): String {
return str.substr(str.length - 1, str.length);
}