使用setTimeout延迟按钮上的样式更改

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.

Answer 1

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> 

Answer 2

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> 

Answer 3

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>