JS: toggle element's blinking

Question

Lets say I have some element with id="circle" and some button with id="button". All I need to do is:

Circle is blinking by default;
When user presses the button, circle stops blinking;
When user presses the button once more, circle starts blinking;
And so on.

I am trying to do this with the following code:

var blinking = true;

function flash(elementId) {
  var bl = document.getElementById(elementId);
  bl.style.visibility = bl.style.visibility == "hidden" ? "visible" : "hidden";
}

function buttonClick() {
  if (blinking) {
    clearInterval(flash('circle'));
  } else {
    setInterval(flash('circle'), 200);
  }
}  
setInterval(flash('circle'), 200);

<!DOCTYPE html>
<html>
 <body>
    <strong id="circle">&#x25cf</strong>
    <br>
    <button type="button" id="leftButton" onclick="buttonClick()">toggle</button>
  </body>
</html>

but it doesnt work in desirable way. If the solution's code in pure JS will be too large, you can write it with jquery, it doesnt really matter.

Martin Adámek · Accepted Answer · 2017-04-23T09:46:16.960

1

You are calling the flash method, instead you need to provide a callback to setIterval. Also you should store an interval handler to some variable, and use it when calling clearInterval. Last thing that is missing in your code is toggling the blinking boolean value on each click.

var interval;
function buttonClick() {
  if (blinking) {
    clearInterval(interval);
  } else {
    interval = setInterval(flash.bind(null, 'circle'), 200);
  }
  blinking = !blinking;
}
buttonClick();

Or you could simply use function(){}, like this:

interval = setInterval(function() {
    flash('circle');
}, 200);

edited Apr 23 '17 at 09:46

answered Apr 23 '17 at 09:39

Martin Adámek

16,771
5
45
64

Thanks for help, but this code isnt working too: https://jsfiddle.net/pbxh3amx/2/ – smocer Apr 23 '17 at 09:57
1

It is working, its just jsfiddle "bug" (JS method is not reachable from HTML code). https://jsfiddle.net/pbxh3amx/3/ – Martin Adámek Apr 23 '17 at 09:59

score 0 · Answer 2 · answered Apr 23 '17 at 10:24

var blinkingInter = null, 
   circle = document.querySelector('#circle');
//@param ele element object
function toggleCircle(ele) {
    ele.classList.toggle('hidden');
}
// first parameter of setInterval is function 
blinkingInter = setInterval(function() {toggleCircle(circle)}, 
200);

function buttonClick() {
    if(blinkingInter !== null) {
         clearInterval(blinkingInter);
         // set blinkingInter to null
         blinkingInter = null;
    } else {
        blinkingInter = setInterval(function() {
             toggleCircle(circle)}, 200);
    }
}

you need to add css .hidden {display: none}, see fiddle example [fiddle link](https://fiddle.jshell.net/3mnup38u/) — Pengcheng, Apr 23 '17 at 10:26

score 0 · Answer 3 · answered Apr 23 '17 at 10:40

This code is used with both jquery and css:

the css:

@keyframes blink {
0%{opacity: 0.0;}
50%{opacity: 1.0;}
100%{opacity: 0.0;}
}
.circle {
display: inline-block;
background: #f00;
width:30px;
height:30px;
border-radius:15px;
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
}
.circle.blinker {
 animation: blink .3s infinite;
}
.jdhf {
 background: blue;
}

And the jquery:

$("*").on("click","#button", function(e){
e.stopPropagation();
//verify if the div is blinking and then stop blinking
var f=$(".blinker").length;
if(f>0){
$("#circle").removeClass("blinker");
}
else {
$("#circle").addClass("blinker");
}
});

The html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="circle" class="circle blinker">
</div>
<button id="button" class="jdhf">
Toggle animation
</button>

Try it here: https://jsfiddle.net/amostk/ev5uusra/3/

Volt · Answer 4 · 2017-04-23T16:45:15.000

Since toggle is not used for two functions anymore, you need to set a variable (either class or hidden tag) for switching. This example shows hidden input instead of a variable (since Boolean variable would not be flexible for multiple buttons, and using opacity blink as a cool option which I found somewhere else here on Stack.

<div id="circle">
    text
</div>
<div id="button">
    <input type="hidden" value=0 />
    button
</div>
<script>
    var circle = setInterval(function(){blink()}, 1000);
    function blink() {
        $("#circle").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }
    $("#button").click(function() {
        var a = $(this).find("input[type='hidden']").val() == 0 ? 1 : 0;
        if ( a == 1 ) {
            clearInterval(circle);
        }else {
            circle = setInterval(function(){blink()}, 1000);
        }
        $(this).find("input[type='hidden']").val(a);
    });
</script>

JS: toggle element's blinking

4 Answers4

Linked