Implement a delay for updating the style of a button by using the setTimeout function

Question

Implement a delay for updating the style of a button by using the setTimeout function

Is it possible to create a button that, when clicked, changes color to green and then reverts back to its original style after 3 seconds?

I am able to change the button color using an onClick event in my script. However, I encounter scope errors when trying to implement a function that returns the button to its normal colors.

Javascript:

<script type="text/javascript>

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

</script>

HTML:

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

The issue arises with the newColor function not executing and triggering an "elem" undefined error in the normalColor function.

If I simplify the code to only change the style once, it works perfectly. The challenge lies in reverting it back to its original state.

javascript html css

Answer 1

Answer №1

Is this what you were looking for?

I noticed a typo in your code: elem.sytle.color = ''; it should actually be style. You also need to call the newColor function on 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

Is this what you were looking for?

I noticed a typo in your code: elem.sytle.color = ''; it should actually be style. You also need to call the newColor function on 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 3

Answer №2

Instead of using 3 functions, a simpler approach is to apply a CSS class on click and then remove it after a 3-second delay. This method is useful because removing a class reverts the element back to its original style without any extra steps!

By utilizing classes for styling changes, you can easily apply or remove multiple styles simultaneously, rather than dealing with individual ones.

Avoid inline HTML event attributes like onclick and use JavaScript event handlers instead. Here's why: here.

// Access the button element
var btn = document.getElementById("copyButton");

// Add event listener in JavaScript
btn.addEventListener("click", clickDelay);

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

/* Upon click, this class will be added
   and then removed after 3 seconds, restoring
   the button to its original appearance. */
.special { 
  background-color:green;
  color:white;
}

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

Answer 4

Instead of using 3 functions, a simpler approach is to apply a CSS class on click and then remove it after a 3-second delay. This method is useful because removing a class reverts the element back to its original style without any extra steps!

By utilizing classes for styling changes, you can easily apply or remove multiple styles simultaneously, rather than dealing with individual ones.

Avoid inline HTML event attributes like onclick and use JavaScript event handlers instead. Here's why: here.

// Access the button element
var btn = document.getElementById("copyButton");

// Add event listener in JavaScript
btn.addEventListener("click", clickDelay);

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

/* Upon click, this class will be added
   and then removed after 3 seconds, restoring
   the button to its original appearance. */
.special { 
  background-color:green;
  color:white;
}

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

Answer 5

Answer №3

Perhaps you could pass a parameter to the onClickDelayEvent function and utilize it directly within the code... something in this fashion:

<script type="text/javascript">

function onClickDelayEvent (element) {
    function changeColor() {
        element.style.background = 'green';
        element.style.color = 'white';
    }
    function revertColor() {
        element.style.background = '';
        element.style.color = '';
    }
    setTimeout(revertColor, 3000);
}

</script>

Answer 6

Perhaps you could pass a parameter to the onClickDelayEvent function and utilize it directly within the code... something in this fashion:

<script type="text/javascript">

function onClickDelayEvent (element) {
    function changeColor() {
        element.style.background = 'green';
        element.style.color = 'white';
    }
    function revertColor() {
        element.style.background = '';
        element.style.color = '';
    }
    setTimeout(revertColor, 3000);
}

</script>

Implement a delay for updating the style of a button by using the setTimeout function

Answer №1

Answer №2

Answer №3

Similar questions

Tips for displaying a restricted quantity of items in a list according to the number of li lines used

Utilizing the power of AngularJS with ng-class for dynamic styling and

Vue.js application failing to display images fetched from the server

What is the best way to create vertical spacing between Material UI Grid Paper components?

jQuery behaving erratically following deployment to the testing server

Guide on transferring a 200MB database to an HTML5 web page executed locally

Transmitting the identification number of a post with the help of J

Error message displayed on PHP web page

Aligning list items with Bootstrap

Twitter Bootstrap 3 - Change column order for extra small screens

Tips for displaying a digital keyboard when a webpage loads on iOS Safari

Sending back JSON arrays containing Date data types for Google Charts

Is there a way to ensure that the div of my template spans 100% in width and height?

Is it possible to condense the coding of a vast array of objects into a more concise format?

The text area within the input group is misaligned with the input group button

Calculate the frequency of tag_name occurrences on a webpage using Python and Selenium

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

Having trouble retrieving the toDataURL data from a dynamically loaded image source on the canvas

Troubleshooting a problem with placeholder styling on Internet Explorer

The "Next" button fails to function after a replay has been completed