Blinking text in a button

Question

I have this function to blink text in a button "AddMoney" :-

 function blinker1(){
    document.getElementById("AddMoney").value="Add Money";
    setTimeout("document.getElementById('AddMoney').value='                   '", 500);
    xxxx = setTimeout("blinker1()",1500);
                     }

And I stop it and set the text with this function:-

    function cease1() {   
            clearTimeout(xxxx);
            document.getElementById("AddMoney").value="Add Money";
                      }

It works but now and again there is no text in the button. Anyone Know why and how to fix.

Button text flashes and when I call cease1 the flashing stops and the text appears in button. Now and again there is no text in button. An alert after the cease1 call shows the text is always set but sometimes it doesn't show in the button. — old-ocker, Feb 14 '17 at 03:27
I don't get the meaning of now and again. Are you sure the text isn't getting clipped — Abana Clara, Feb 14 '17 at 03:27

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

This version should work a bit better for you. I stuck with vanilla Javascript rather the introducing jQuery:

Fiddle

var blink = window.setInterval(blinker1, 900)

function blinker1() {
  var addMoney = document.getElementById("addMoney");

  addMoney.innerHTML = " ";
  setTimeout(function(){addMoney.innerHTML = "ADD MONEY"}, 300);
}

document.getElementById('stop').addEventListener('click', function(){
    clearInterval(blink);
})

Note - it would be better and easier to achieve a blink effect using pure CSS.

edited May 23 '17 at 12:08

Community

1
1

answered Feb 14 '17 at 04:15

Rich

3,156
3
19
29

1

You should use `clearInterval` instead of `clearTimeout`, even when both work. – Bergi Feb 14 '17 at 04:35
Good catch. Updated! – Rich Feb 14 '17 at 04:45

Bergi · Accepted Answer · 2017-02-14T05:09:00.097

Now and again there is no text in the button. Anyone Know why?

It happens whenever cease1() is called while setTimeout("document.getElementById('AddMoney').value=' '",500) is still scheduled, which happens on average every third time. In that case, the blinker1() timeout is cancelled and the content is shown, but shortly after it will be hidden again.

… and how to fix?

You'll have to cancel both timeouts:

var timerA, timerB;
function blinker() {
    document.getElementById("AddMoney").value = "Add Money";
    timerA = setTimeout(function() {
        document.getElementById('AddMoney').value = "";
    }, 500);
    timerB = setTimeout(blinker1, 1500);
}
function cease1() {   
    clearTimeout(timerA);
    clearTimeout(timerB);
    document.getElementById("AddMoney").value = "Add Money";
}

Alternatively, use two functions that are mutually scheduling each other so that only one timer is active at a time:

var timer;
function blinkerA() {
    document.getElementById("AddMoney").value = "Add Money";
    timer = setTimeout(blinkerB, 500);
}
function blinkerB() {
    document.getElementById('AddMoney').value = "";
    timer = setTimeout(blinkerA, 1000);
}
function cease1() {   
    clearTimeout(timer);
    document.getElementById("AddMoney").value = "Add Money";
}

hakany · Answer 3 · 2017-02-14T06:40:46.253

The text disappears because you only set clearTimeout on xxxx, so the timeout for setTimeout("document.getElementById('AddMoney').value=' '", 500); will always execute. I think this is the reason why there is no text in the button.

My approach would be to set a counter, let say the text need to blink 10 times (based on your code it will take 15sec.) Each time when the text shown the counter will decrease until it reaches 0.

sample code (https://jsfiddle.net/2trodftu/1/)

    //counter
    var blinkCounter = 10;

    // blink method
    function blink() {
        document.getElementById("AddMoney").value="Add Money";

        if (blinkCounter > 0) {
            setTimeout("document.getElementById('AddMoney').value='                   '", 500);
            setTimeout(blink,1500);
        }

        blinkCounter = blinkCounter - 1;
    }

    //initializer
    blink();

Hope this helps.

Blinking text in a button

3 Answers3