How do I prevent already started "onclick" function in Javascript even after I reload the page?

Question

I have a button with an "onclick" function that disables the button for 15 seconds. After that it will be automatically clickable, but in between 15 seconds of time period after a click, if I do refresh the page, it doesn't count the remaining seconds and the button is now clickable.

function up(){
    $(document).ready(function () {
          $("#upside").attr("disabled", true);
          document.getElementById("downside").disabled = true;
            setTimeout(function () {
              $("#upside").removeAttr("disabled");
              $("#downside").removeAttr("disabled");
              window.location ='/Balnce_add';
                  },15000);
  });
    }

And here is my HTML button code:

<button id="upside" onclick="up()" type="submit" class="btn btn-success">Up</button>

There's no need to use $(document).ready() inside an event handler like that. And when the page is refreshed, everything about the previous page will be gone; nothing survives that transition, including your timeout handler. — Pointy
– Pointy, Commented Sep 22, 2021 at 16:47
so sir how do i prevent this thing please it very important for me — LEGENDRYzZzZ
– LEGENDRYzZzZ, Commented Sep 22, 2021 at 16:48
If you want information to persist between page reloads, save it in sessionStorage. When you disable the button, save the start time in session storage. When the page reloads, get the start time from session storage, disable the button if it's <15 seconds since then, and start another timer to re-enable the button. — Barmar
– Barmar, Commented Sep 22, 2021 at 16:54

Tuan Dao · Accepted Answer · 2021-09-22 17:19:20Z

The idea is save the startTime to localStorage. And then when we reload page, we will get the remainingTime = startTime + timer - currentTime. If remainingTime > 0, we will keep disable the button. If not, we do nothing.

And based on that idea, I updated your code to let it works. You can check the demo by the below code:

<html>
   <head>
      <title>Demo</title>
   </head>
   <body>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <button id="upside" onclick="up(true)" type="submit" class="btn btn-success">Up</button>
      <script>
         function getRemainingTimer(isNew) {
           var now = new Date();
           var timer = 15000;
           var remainingTimer = 0;
           var startTime = localStorage.getItem("startTime");
           if (startTime === null) {
             if (!isNew) return 0;
             localStorage.setItem("startTime", now.getTime());
             remainingTimer = timer;
           } else {
             remainingTimer = timer + parseInt(startTime) - now.getTime();
           }
           
           return remainingTimer;
         }
         
         
         
         
         function up(isNew) {
          
         var remainingTimer = getRemainingTimer(isNew);
         console.log(remainingTimer);
         
         if (remainingTimer > 0) {
           $("#upside").attr("disabled", true);
           $("#downside").attr("disabled", true);
           
           var timeout = setTimeout(function() {
             $("#upside").removeAttr("disabled");
             $("#downside").removeAttr("disabled");
             window.location = '/Balnce_add';
            
            localStorage.removeItem("startTime");
            
           }, remainingTimer);
         } else {
           localStorage.removeItem("startTime");
         }
         
         }
         
         up(false);
         
      </script>
   </body>
</html>

Also, you can check the live demo at https://codepen.io/tuandaodev/pen/NWgBjbv

hey your demo code is working absolutely fine but when I tried in my file it shows the same problem, after refreshing it get enabled it done not count reaming time to enable it
@LEGENDRYzZzZ I have another version for you with the down button. Please let me know if it suits your requirements. codepen.io/tuandaodev/pen/powQgYj
@LEGENDRYzZzZ That's my pleasure to help you. I'm a newbie on StackOverflow, also.

Leshawn Rice · Accepted Answer · 2021-09-22 16:56:02Z

It depends on how the app is setup, but an easy way to do it would be to store something in localhost with the ID of the button was clicked.

myButton.addEventListener('click', (evt) => {
  evt.preventDefault();
  let dateTime = new Date();
  localStorage.setItem('clickedButtons', [{id: myButton.id, clickedAt: dateTime}]
});

$(document).ready(() => {
  let storageButton = localStorage.getItem('clickedButtons')[0];
  let dateTime = new Date();
  if (dateTime - storageButton.clickedAt < 15000) {
    let btn = $(`#${storageButton.id}`);
    btn.attr('disabled') = true;
  }
})

I wrote this pretty quickly so it's probably a bit rough, but the general idea is when the button is clicked, add something to localstorage with the time it was clicked, and on page load check localstorage, and if it hasn't been 15 seconds since the button was clicked, disable it

Collectives™ on Stack Overflow

How do I prevent already started "onclick" function in Javascript even after I reload the page?

2 Answers 2

12 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Linked

Related