Toggling visibility of a button in AS3 - actionscript-3

Question

I have a table (just drawn onto the stage) which has some values in it. You should be able to click on the different boxes in the table, and hide or show the value in that box.
I did this by having a layer on top of the layer with the table that has white buttons (same color as background) on it. So you should be able to click on the button, make it invisible to show the value, then click again to hide the value.
import flash.events.MouseEvent;
//these are each of the instances of the white buttons.
var visibleValues:Array=new Array(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p);
for(var t:int=0; t<visibleValues.length; t++){
visiblesValues[t].addEventListener(MouseEvent.CLICK, showValue);
}
function showValue(evt:Event):void{
if (evt.target.visible){
evt.target.visible=false;
}
else{
evt.target.visible=true;
}
}
Clicking on the button when it is visible will make it invisible (showing the number underneath), however when I try to click on it again the button does not reappear.
Why is this? Also out of curiosity is there a simpler way to do this? It seems odd to have to assign the event listener to each instance, when they are all instances of the same thing.
Thanks very much!

Answer 1

For your first problem try setting the alpha to 0.1 instead of visible to false. When you set visible to false you are also disabling user interaction.
Click events should bubble so you can add the listener once to the parent container then use something like the event.currentTarget to get access to the button actually clicked. Where this becomes a little harder is when the label or skin parts of the button are assigned to the currentTarget.
To get around that you can either set mouseChildren to false on each button or in the event handler keep calling .parent until you hit a button or the parent container.
Note that when you listen higher you will also get clicks on the parent so you will need to handle that case in the handler.
function showValue(evt:Event):void {
// Detect which button was clicked
var target:DisplayObject = evt.currentTarget as DisplayObject;
while(target) {
if (target is Button) {
break;
}
// container clicked so exit
if (target == container) {
return;
}
target = target.parent;
}
// No button was clicked so exit
if (!target) {
return;
}
// If we are solid then hide
if (target.alpha == 1){
target.alpha = 0.1;
} else{
target.alpha = 1;
}
}