Hour Hand Fill not changing

[kenlpeters]

So I am trying to change the min/hour hand depending on the hour.  I have implemented a class in the CSS and in the JS file. I am performing this sample code.  However it is not changing the fill.  I have checked with the console.log to make sure the case black is being executed but the fill never changes.  

switch (hours){
case 12:
hourHand.style.fill = "#ECF2D0";
case 1:
hourHand.style.fill = "#ECF2D0";
case 2:
hourHand.style.fill = "#ECF2D0";
case 3:
if(mins < 30){
hourHand.style.fill = "#ECF2D0";
}else{
hourHand.style.fill = "black";
}

[JonFitbit]

Have you checked the format of your images is correct? They need to be 8bit png, see:

https://dev.fitbit.com/build/guides/user-interface/css/#image-grayscale-magic-

Sorry, I also just noticed, you aren't breaking in your switch.

switch (hours){
  case 12:
    hourHand.style.fill = "#ECF2D0";
    break;

[kenlpeters]

These are not images, they are rectangles.  Does FitBit require the break, common JS does not.

[JonFitbit]

I don't know commonjs, but the device uses ES 5.1 Javascript. 

The break is optional, but will continue to the next statement without it.

I'd be tempted to try this before the switch, to make sure you have a handle on your element.

console.log(typeof hourHand);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

The optional break statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If break is omitted, the program continues execution at the next statement in the switch statement.

[kenlpeters]

Jon,

Thanks.  I have tried the 

console.log(typeof hourHand);

And the result is Object.  I know I have the right object because later in the code a transfer is working using that handler.  For some reason it just won't change the color on the tick.

[kenlpeters]

Here is smaller example.  For some reason it just does not want to change the color.

switch (secs){

case 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,48,49,50,51,52,53,54,55,56,57,58,59,60:
secHand.style.fill = "black";
break;
default:
secHand.style.fill = "#ECF2D0";
break;

}

[kenlpeters · Accepted solution]

Fixed:

My hands: secHand, minHand, hourHand were referring to the <g> block, the actual rectangles within the <g> block.  I added ID's for the rectangles and updated the JS code to refer to the new names and it works flawlessly.  

Thanks