my shapes aren't changing colors I'm not sure why

Question

I have a code that draws a bunch of customized shapes from an xml... I want to make each shape select-able /de-selectable by changing the color of the object and changing backk all other colors when things change but my codes broken but i'm not getting any errors or anything it just doesn't work.

        var graphicsShape

 function drawLayer(layer){
    for (var i =0; i < xmlDoc.getElementsByTagName("polygon").length; i++)
        {
            if (layer == xmlDoc.getElementsByTagName("polygon")[i].childNodes[0].attributes[4].value)
               { drawSegment(i);
               }
        }

    }
     // layer = index z     

 function drawSegment(a){

    var vertexList =  xmlDoc.getElementsByTagName("polygon")[a].childNodes;
    var graphicsObject = new createjs.Graphics();

    graphicsShape = new createjs.Shape(graphicsObject);



    graphicsObject.setStrokeStyle(1);
    graphicsObject.beginStroke(createjs.Graphics.getRGB(0,0,0));
    graphicsObject.beginFill(createjs.Graphics.getRGB(255,0,0));


    for(var i = 0; i < vertexList.length; i++){ 

           graphicsObject.lineTo(vertexList[i].attributes[2].value,  vertexList[i].attributes[3].value)

           stage.addChild(graphicsShape);

           }

   segmentsArray.push(graphicsShape);
   //createContainer(segmentsArray[i]);
   }


 function createArraysForSegments() {

     for(var i=0; i <segmentsArray.length; i++){
          segmentsData[i] = new Array;
          }
     }


 function ColorChangeAddEventListener() {
     for(var i = 0; i < segmentsArray.length; i++){ 
           segmentsArray[i].addEventListener('click', colorChange(i));
           }
     }

 function colorChange(index){
     segmentsArray[index].graphics.beginFill('white');
     stage.update();
     }

i call the functions later ColorChangeAddEventListener(); drawLayer(0); stage.update();

if i type segmentsArray[0].alpha =0.5; it works for that shape, but when I put it in segmentsArray[0].addEventsListener('click', function){segmentsArray[0].alpha=0.5;}) that doesn't work

Answer 1

Just setting the beginFill won't affect the current shape, you will also have to segmentsArray[index].graphics.clear() and redraw the shape.

beginFill() is not the setter for a property but rather a command that affects subsequents commands, like drawRect() for example.