toggle button text on a timer with javascript

I have a working toggle button text code but I would like the button to toggle back to the original state after 4 seconds. I have tried looking for a solution and can’t wrap my head around whether I need to use a set interval function or settimeout function and how to implement them exactly. Hopefully a javascript wizard can help me out here.

function myFunctionbutton() {
  var x = document.getElementById("singleadd");
  if (x.innerHTML === "add to bag") {
    x.innerHTML = "Loading...";
  } else {
    x.innerHTML = "add to bag";
  }
}
<button id="singleadd" onclick="myFunctionbutton()">add to bag</button>

2 thoughts on “toggle button text on a timer with javascript”

  1. You can use setTimeout()

    function myFunctionbutton() {
      var x = document.getElementById("singleadd");
      if (x.innerHTML === "add to bag") {
        x.innerHTML = "Loading...";
        setTimeout(function () {
          x.innerHTML = "add to bag"
        }, 4000);
      }
    }
    <button id="singleadd" onclick="myFunctionbutton()">add to bag</button>
    Reply
  2. You can use setTimeout function to get back to "add to bag" state after 4 seconds.

    function myFunctionbutton() {
      var x = document.getElementById("singleadd");
      x.disabled = true;
      x.innerText = "Loading...";
      setTimeout(() => {
         x.innerHTML = "add to bag";
         x.disabled = false;
      }, 4000);
      
    }
    <button id="singleadd" onclick="myFunctionbutton()">add to bag</button>
    Reply

Leave a Comment