AppendText to Last Line Problem

[javin]

I have some checkboxes, that when selected will display information in a list.
The problem is, I want the list to be in the order that the user selected the checkboxes.

Here is some sample code.

checkbox1.addEventListener(MouseEvent.CLICK, updateList);
checkbox2.addEventListener(MouseEvent.CLICK, updateList);

function updateList (event:MouseEvent):void {
    
    cart_txt.text = "Your Travel Backpack:\n\n";
    if (checkbox1.selected == true) cart_txt.appendText("Miami \n");
    if (checkbox2.selected == true) cart_txt.appendText("New York \n");
    
}

Right now, if you select checkbox2, and then checkbox1 after that, it will still read:

Miami
New York

Instead it should read:

New York
Miami

Is there a way to appendtext to the last line previously appended?

Thanks.

[5TonsOfFlax]

Instead of checking only whether each is selected, check also that the event target is that checkbox.

You also are not removing things yet. You may want to simply regenerate the entire text each time.

[javin]

Instead of checking only whether each is selected, check also that the event target is that checkbox.

You also are not removing things yet. You may want to simply regenerate the entire text each time.

Well, I'm confused.

I'm not quite sure why I would want to regenerate the entire text each time. I just want the text to generate in list form, in the order that the user selects the checkboxes. And say the user unselects one of the boxes; if they choose to reselect it at a later time, it would still go to the bottom of the list.

[5TonsOfFlax]

I was only thinking that you'd regenerate the list if you wanted to handle removal and adding easily (but without time-order). As of now (with proposed target check fix), if the user checks "miami", "new york", and then un-checks and rechecks "miami", the list will be:

miami
new york
miami

[javin]

That actually isn't the case. The lines are removed when you uncheck the boxes.

Please take a look at this sample file.
http://javinladish.com/stuff/traveltest.fla.zip

[5TonsOfFlax]

Can't open your fla, because I don't have flash.

I see, you ARE regenerating the entire list each time by resetting the text in that first line. I skimmed that the first couple of times.

Try something like this:

checkbox1.addEventListener(MouseEvent.CLICK, updateList);
checkbox2.addEventListener(MouseEvent.CLICK, updateList);

var selected:Array = [];

function updateList (event:MouseEvent):void {
    var cb:CheckBox = CheckBox(event.target);
    if (cb.selected){
       addToList(cb.label);
    }else{
       removeFromList(cb.label);
    }
    generateListText();
}

function addToList(text:String):void{
   if (selected.indexOf(text) == -1){
     selected.push(text);
   }
}

function removeFromList(text:String):void{
   var where:int = selected.indexOf(text);
   if(where != -1){
     selected.splice(where, 1);
   }
}

function generateListText():void{
    cart_txt.text = "Your Travel Backpack:\n\n";
    for (var i:int = 0; i < selected.length; i++){
      cart_txt.appendText(selected[i]);
      cart_txt.appendText(" \n");
    }
}

[javin]

Hey! It works perfect!
It's kind of a bummer it takes a lot of code to produce it, but thank you so much.

This is just a sample file. In the real project I will be doing this for over a hundred little checkboxes. This could get messy, haha.

Also, what if I don't want the displayed text to be the same as the label?
Say I want it to be the address of the location? Right now it's just set to cb.label for all of the boxes.

[5TonsOfFlax]

Actually, if you put all your checkboxes in a container, then you can use a single listener. Let's say they are in a container called 'boxes'. Remove:

checkbox1.addEventListener(MouseEvent.CLICK, updateList);
checkbox2.addEventListener(MouseEvent.CLICK, updateList);

and change it to:

boxes.addEventListener(MouseEvent.CLICK, updateList);

You might want to check that the target is a checkbox in this case:

function updateList (event:MouseEvent):void {
    if (!target is CheckBox){
      return;
    }
    var cb:CheckBox = CheckBox(event.target);
    if (cb.selected){
       addToList(cb.label);
    }else{
       removeFromList(cb.label);
    }
    generateListText();
}

I did not find another built in property of CheckBox to use besides label, which means that if you want it to be something else, you'll have to either extend CheckBox to create such a class (dead simple), or associate the boxes and values some other way like a Dictionary.

Here's a ValueCheckBox:

public class ValueCheckBox extends CheckBox {
  public var value:*;

  public function ValueCheckBox(v:* = null){
    super();
    this.value = v;
  }
}

Now you can use ValueCheckBoxes instead of CheckBoxes and put whatever values you want in each.

Or, the dictionary way:

var values:Dictionary = new Dictionary();
values[checkbox1] = "something";
values[checkbox2] = "something else";

And you'd change the listener like so:

function updateList (event:MouseEvent):void {
    var cb:CheckBox = CheckBox(event.target);
    if (cb.selected){
       addToList(values[cb]);
    }else{
       removeFromList(values[cb]);
    }
    generateListText();
}

[javin]

Perfect. Everything is working great.

I have no clue how you are doing this without being in Flash.

Thanks though. Case closed!...for now.