Change colour of map area on click

Question

I have a map code on an image of the human body and areas are used for each individual body part.

I have the following JS code...

// Display body map.
$('#human-body').maphilight();

var colourCounter = 0
if (colourCounter = 0) {
  $('map area').click(function(e){  
      $('#human-body').maphilight({ 
      fillColor: '00ff00', strokeColor:'000000' //green
      }); 
  });
  colourCounter = 1 
};

if (colourCounter = 1) {
  $('map area').click(function(e){  
      $('#human-body').maphilight({ 
      fillColor: 'ff0000', strokeColor:'000000' // red
      }); 
  });
  colourCounter = 1 
};

// Make the clicked area selected.
$('map area').click(function(e) {
  e.preventDefault();
  // Remember clicked area.
  var clickedArea = $(this);
  // For each area...
  $('map area').each(function() {
    // get
    hData = $(this).data('maphilight') || {};
    // modify
    hData.alwaysOn = $(this).is(clickedArea);
    // set
    $(this).data('maphilight', hData ).trigger('alwaysOn.maphilight');
  });
});

I am trying to make the maphilight() work of course by hovering by first line of code. My main aim is to when you have clicked on a body part, the colour should initially be green and then when you click the same body part/area again it should change to red, and clicking on it again changes colour back to green. However, with my attempt above, it stays on red. Please advice on what I could do.

Answer 1

The problem is that you're checking for the value of the variable, and then assigning a click handler. Since the colorCounter is set to 0 at the start, only a single click handler is created.

You should check for the value of colorCounter from inside of the click handler.

Example (I've also moved the colors into a swatch object and used string values for the colorCounter... which should probably be renamed now ^_^ ):

  var currentColor = 'green';

  // object with color swatches
  var fills = {
    green: { fillColor: '00ff00', strokeColor:'000000'},
    red:   { fillColor: 'ff0000', strokeColor:'000000'}
  }

  $('map area').click(function(e){  
      // use swatch object to higlight
      $('#human-body').maphilight(fills[currentColor]);

      // switch out the colors
      if (currentColor == 'green') {
        currentColor = 'red';
      } else {
        currentColor = 'green';
      }
    });

Also, you are using assignment instead of comparison by mistake.

The following line will just assign 0 to the colorCounter

if (colourCounter = 0) {
...
}

The same happens where you're checking if the value is 1.

The comparison should be

if (colourCounter == 0) {
...
}

Or better yet

if (colourCounter === 0) {
...
}

Same for line with if (colourCounter = 1)

Two equal signs == are used for comparing values, where === compares value and the type, meaning it's more strict.