ClearInterval() Lite Brite extra part


#1

I don't understand why I can't make the blink go off using clearInterval() as follow when clicking blink again.
function main(){

var colorClass = '';
$('.select-color').on('click',
function(){
var selectedColor=$(this).attr('class');

switch(selectedColor){
   case'select-color cyan not-selected':
    colorClass = 'cyan';
   break;
   case'select-color yellow not-selected':
    colorClass = 'yellow';
   break;
   case'select-color magenta not-selected':
    colorClass = 'magenta';
   break;
       }
$(this).removeClass('not-selected');
$(this).siblings().addClass('not-selected');

});
$('.box').on('click', function() {
$(this).toggleClass(colorClass);
});

$('.toggle-blink').on('click', function() {
if(colorClass){
$('.toggle-blink').toggleClass('opacity');
var id=setInterval(function() {
$('.box.cyan, .box.yellow,.box.magenta').toggleClass('blink');
},350);
return $('.toggle-blink').hasClass('blink')?id : clearInterval(id);
}
});
}

$(document).ready(main);

Thanks!


#2

$('.toggle-blink').on('click', function() {
if(colorClass){
$('.toggle-blink').toggleClass('opacity');
var id=setInterval(function() {
$('.box.cyan, .box.yellow,.box.magenta').toggleClass('blink');
},500);
return $('.toggle-blink').hasClass('blink')?id : clearInterval(id);
var clearInterval = window.setInterval(cyan, yellow,magenta);
}
});
}

plug that in after your toggle blink on click. That should fix your problem.
the theory behind it is on https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval#Example
I hope this helps you.

-miguel g