Use setTimeout to delay a style change on a button

Question

I would like to have a button styled normally. Then clicked, it will turn green. Then after 3 seconds it will return to its normal style.

I can get the button to change calling to my script with onClick but I get scope errors when I try to work in the function to return it to normal colors.

Javascript:

<script type="text/javascript">

function onClickDelayEvent () {
    function newColor(elem) {
        elem.style.background = 'green';
        elem.style.color = 'white';
    }
    function normalColor(elem) {
        elem.style.background = '';
        elem.sytle.color = '';
    }
    setTimeout(normalColor,3000);
    }

</script>

HTML:

<button id="copyButton" onclick="onClickDelayEvent(this)">Copy</button>

The first function (newColor) doesnt fire and I get "elem" undefined on the normalColor function.

If I strip out the extra code and just change the style once it works fine. It's just getting the second part to flip it back that's not working.

score 4 · Answer 1 · answered May 30 '17 at 17:45

Is this you wanted?

You have typo elem.sytle.color = ''; it should be style you need to call newColor function onClickDelayEvent

<script type="text/javascript">

function onClickDelayEvent (elem) {
   
    function newColor(elem) {
        elem.style.background = 'green';
        elem.style.color = 'white';
    }
    function normalColor(elem) {
        elem.style.background = '';
        elem.style.color = 'black';
    }
    setTimeout(normalColor,3000,elem);
    newColor(elem);
    }

</script>

<button id="copyButton" onclick="onClickDelayEvent(this)">Copy</button>

Scott Marcus · Accepted Answer · 2017-05-30T18:01:16.430

You really don't need 3 functions here. We can simplify this by just applying a CSS class upon click and then simply removing that class in a function that is delayed by 3 seconds. This little "trick" is so handy because by removing a class, the element reverts back to whatever style was in effect before the class was added - - You don't have to do anything to get the old style back!

Also, relying on the addition or removal of classes allows for multiple styles to be applied or removed at once, instead of working with individual styles.

Lastly, do not use inline HTML event attributes (onclick, etc.), here's why.

// Get button reference
var btn = document.getElementById("copyButton");

// Set up event handler (do this in JavaScript, not HTML)
btn.addEventListener("click", clickDelay);

function clickDelay(evt) {
    evt.target.classList.add("special");
    setTimeout(function(){
      evt.target.classList.remove("special");
    },3000);
}

/* This class will be immediately added upon a click
   and then removed 3 seconds later, causing the button
   to return to its original style. */
.special { 
  background-color:green;
  color:white;
}

<button id="copyButton">Copy</button>

I prefer this answer, especially the "separation of concerns" part is what I find important. Also, I think this code is much cleaner. Besides, the browser will likely cache CSS, what he can't do with those inline attributes. — SVSchmidt, May 30 '17 at 17:56
Thank you. This is much cleaner than my thought process and does make more sense with the link about onclick events. I really appreciate it. — noook, May 30 '17 at 18:00
@nokaoii You're welcome. By the way, if you like the linked answer about not using inline HTML event attributes, feel free to vote that answer up as well. ;) — Scott Marcus, May 30 '17 at 18:03

score 0 · Answer 3 · answered May 30 '17 at 17:45

You cloud probably receive a parameter to onClickDelayEvent and use it directly in the functions... something along the lines of

<script type="text/javascript">

function onClickDelayEvent (elem) {
    function newColor() {
        elem.style.background = 'green';
        elem.style.color = 'white';
    }
    function normalColor() {
        elem.style.background = '';
        elem.sytle.color = '';
    }
    setTimeout(normalColor,3000);
}

</script>

Use setTimeout to delay a style change on a button

3 Answers3