Reset variable in Javascript on execute?

Question

I am using this function to auto-click a button after 15 seconds. The problem is the user doesn't leave the page after the option is run and it may be re-run again on the same page but the timer continues. In fact, the timer continues even if I do the action myself.

<script type="text/javascript">
time = 15;
interval = setInterval(function() {
  time--;
    document.getElementById('Label1').innerHTML = "You must choose in " + time + " seconds"
    if (time == 0) {
        // stop timer
        clearInterval(interval);
        // click
        document.getElementById('thebutton').click();       
    }
}, 1000)

</script>

So this script should run the timer and "press" the "thebutton" in fifteen seconds and then the timer should stop counting and reset until run again. If the button is pressed manually before 15 seconds it should still reset.

<input type='submit' id='thebutton' value='Done'></input>

Hopefully this is clear. I am still new and learning.

It's unclear what you are asking. Maybe you could add some explanation of what you are trying to do. — Nisarg Shah
– Nisarg Shah, Commented Jul 22, 2017 at 3:19

Difster · Accepted Answer · 2017-07-22 06:33:55Z

1

Set a base time and then reset it to that.

<script type="text/javascript">
time = 15;
baseTime = 15;
interval = setInterval(function() {
  time--;
    document.getElementById('Label1').innerHTML = "You must choose in " + time + " seconds"
    if (time == 0) {
        // stop timer
        clearInterval(interval);
        // click
        document.getElementById('thebutton').click(); 
        time = baseTime;
        return false;


    }
}, 1000)

</script>

edited Jul 22, 2017 at 6:33

answered Jul 22, 2017 at 3:17

Difster

3,2802 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

This actually half works, this is close. It does reset the time to 15 but the countdown never stops so it resets to 15 but starts counting down again without being re-executed.

Difster Over a year ago

I just made an edit. I added return false; That should stop the timer. Let me know if it doesn't.

Fredrik Christenson · Accepted Answer · 2017-07-22 08:19:46Z

I had a look at the code and the most critical thing that I think you should look at is that the button has no "onclick" function. This means that clicking the button does nothing because you have not put a function there that does something when you click it.

I wrote some code that I hope helps:

let time = 15;
const label = document.getElementById("Label1");
const button = document.getElementById("thebutton");

const getText = () => `You must choose in ${time} seconds`;

const interval = setInterval(() => {
    time--;
    label.innerHTML = getText();
    if (time === 0) {
    // stop timer
    clearInterval(interval);
    // click
    button.click();
  }
}, 1000);

const stopTime = () => {
  clearInterval(interval);
  time = 15;
  label.innerHTML = getText();
};

And in your html something like this:

<input type='submit' id='thebutton' value='Done' onclick="stopTime()" />

Finally I made a small video where I walk through the code, it could be useful as well: https://youtu.be/ZYS9AcxO3d4

Have a great day!

Chris Baldwin · Accepted Answer · 2017-07-22 03:27:14Z

0

If you only want the button to be clicked once after 15 seconds then you should use the setTimeout() function instead of setInterval().

Then if you do not want the auto-click to happen if the user clicks the button then you would need to add an onClick handler to your button that calls clearTimeout().

answered Jul 22, 2017 at 3:27

Chris Baldwin

5995 silver badges11 bronze badges

Comments

H77 · Accepted Answer · 2017-07-22 03:45:11Z

I assume you want the label updated as the seconds count down? And it's unclear how the timer is started. Check the below code and see if it does what you expect.

var time, interval;

function stopTimer() {
  if (interval) {
    clearInterval(interval);
    interval = null;
  }
  
  time = 15;
}

function timerAction() {
  $('#lblStatus').text("You must choose in " + time + " seconds");

  if (time-- <= 0) {
    stopTimer();
    console.log("done!");
    $("#btnStop").click();
  }
}

function startTimer() {
  stopTimer();
  timerAction();
  interval = setInterval(timerAction, 1000);
}

$("#btnStart").click(function() {
  startTimer();
});

$("#btnStop").click(function() {
  stopTimer();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id=lblStatus></span>
<button id='btnStart'>Reset / Start</button>
<button id='btnStop'>Stop</button>

Popeye · Accepted Answer · 2017-07-22 03:45:24Z

0

If you want to run only once, you can use setTimeout function

setTimeout(your code, 15000);

answered Jul 22, 2017 at 3:45

Popeye

2635 silver badges13 bronze badges

Collectives™ on Stack Overflow

Reset variable in Javascript on execute?

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related