javascript - Use setTimeout to delay a style change on a button - Stack Overflow

admin管理员组

文章数量:1415476

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.

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.

• javascript
• html
• css

Share Improve this question Follow asked May 30, 2017 at 17:41 noooknoook 2911 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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>

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>

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>

本文标签： javascriptUse setTimeout to delay a style change on a buttonStack Overflow