Change color of view graphic on click.

Question

I have an esri javascript map. I have an array of {lat, lng, id}. I create a point with the lat, lng, and a symbol, then create a Graphic. I add these items to the map using  esriView.graphics.add(pointGraphic).

When I click the graphic, (which is a small blue circle), I'd like to change the blue to red. However all that happens is I click the circle and my popupTemplate comes up.

How do I change the color of the selected graphic? I feel like this should be easy, but I can't find the answer anywhere.

ScottAndersonGQ · Answer

Thanks Courtney, that was helpful. I ended up designing a method that adds a new graphic on top of the old graphic on click.
Graphic is made with a popupTemplate that includes the "content" property. I set that to a function. See below.

popupTemplate: {     ...,

content: myFunction}
On the graphic click it runs the function which cycles through all graphics and removes any with a specific style. myFunction(){

var graphics = esriView.graphics.items.filter(function (graphic) {
       //my regular graphics have a color.b of  254. I don't want those ones. I want the selected ones which are different.        return graphic.symbol.color.b != 254;      });
     //should only be one in the array, but just in case another selected graphic got in there.      esriView.graphics.removeMany(graphics);

//add a new graphic to map with different color      myFunction2(newgraphicWithTheSameLocationAndAttributes, ThisTimeWithANewColor)
}

Hope that helps.

CourtneyMenikheim · Answer

I've got this working with a polygon:
https://codepen.io/cmenikheim-geojobe/pen/KKmJZPz?editors=1000

A point should function fairly similarly. You may want to put a small buffer around your point for listening to the map click - otherwise, the user would have to click the EXACT center of the graphic for this to work.