How to change the fill color of shape?


I’m playing with GoJS and in this sample:

in this part of code:

// define templates for each type of node
var inputTemplate =
  $(go.Node, "Spot", nodeStyle(),
    $(go.Shape, "Circle", shapeStyle(),
      { fill: blue }),  // override the default fill (from shapeStyle()) to be red
    $(go.Shape, "Rectangle", portStyle(false),  // the only port
      { portId: "", alignment: new go.Spot(1, 0.5) }),
    { // if double-clicked, an input node will change its value, represented by the color.
        doubleClick: function (e, obj) {
            e.diagram.startTransaction("Toggle Input");
            var shp = obj.findObject("NODESHAPE");
            shp.fill = (shp.fill === green) ? red : green;
            e.diagram.commitTransaction("Toggle Input");

I’ve changed “red” to “blue” and when I ran my application I’ve got 2 empty rectangles. It means there is no elements in panel on the left side and I can’t drag anything from left to right side.

How to change the fill color?

Note that at the top of the code we wrote:

    var red = "orangered";  // 0 or false
    var green = "forestgreen";  // 1 or true

If you want it to really be blue, you need to write “blue” or define a var blue to use.

In the console, there should be a JavaScript error, because blue is never defined.