# JavaScript timer reset time

**URL:** <https://community.tulip.co/t/javascript-timer-reset-time/11565>\
**Category:** Developer\
**Tags:** custom-widgets\
**Created:** [May 24, 2024, 4:22pm UTC](https://community.tulip.co/t/javascript-timer-reset-time/11565 "2024-05-24T16:22:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![0343699](https://avatars.discourse-cdn.com/v4/letter/0/f08c70/32.png) [@0343699](https://community.tulip.co/u/0343699)\
**Post date:** [May 24, 2024, 4:22pm UTC](https://community.tulip.co/t/javascript-timer-reset-time/11565/1 "2024-05-24T16:22:08Z")

</div>

Hi, I am new to the tulip application and trying to figure this out. The code I will have down below is the code to my timer that i have made and what i need it to do is for when one of the triggers go off i just want the timer to reset and just start from zero again. But the issue im having is how can i have a trigger reach out and tell the java code to reset the time.  
Thank you for any help.

 label { display:inline; color: green; font-family: Verdana, sans-serif, Arial; font-size: 40px; font-weight: bold; text-decoration: none; }

```
  p{
      color: black;
      font-family: Verdana, sans-serif, Arial;
      font-size: 50px;
      text-decoration: none;
      font-weight: bold;
  }

  body {
    padding: 20px;
    text-align: center;
  }

  button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 1em;
  }
</style>

```

 00:00:00   
 Reset Timer

```
<script>
  // Get the total down time in milliseconds from the tulip app
  let tMill = getValue('total_down_time');
  let t = tMill / 1000;

  let timer = {
      totalSeconds: t,
      intervalId: null,

      start: function() {
          this.intervalId = setInterval(this.setTime.bind(this), 1000);
      },

      setTime: function() {
          ++this.totalSeconds;
          document.getElementById("hours").innerHTML = this.twoDigits(parseInt(this.totalSeconds / 3600));
          document.getElementById("minutes").innerHTML = this.twoDigits(parseInt(this.totalSeconds / 60) % 60);
          document.getElementById("seconds").innerHTML = this.twoDigits(this.totalSeconds % 60);
      },

      twoDigits: function(n) {
          return (n <= 9 ? "0" + n : n);
      },

      reset: function() {
          clearInterval(this.intervalId);
          this.totalSeconds = t;
          this.updateDisplay();
          this.start();
      },

      updateDisplay: function() {
          document.getElementById("hours").innerHTML = this.twoDigits(parseInt(this.totalSeconds / 3600));
          document.getElementById("minutes").innerHTML = this.twoDigits(parseInt(this.totalSeconds / 60) % 60);
          document.getElementById("seconds").innerHTML = this.twoDigits(this.totalSeconds % 60);
      }
  };

  timer.start();

  // Example reset function call
  function resetTimer() {
      timer.reset();
  }
</script>

```

---

<div class="post-metadata">

**Author:** ![danielpomeranz](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/danielpomeranz/32/9379_2.png) [@danielpomeranz](https://community.tulip.co/u/danielpomeranz)\
**Post date:** [May 24, 2024, 7:09pm UTC](https://community.tulip.co/t/javascript-timer-reset-time/11565/2 "2024-05-24T19:09:35Z")

</div>

Hey Tony,

I think you will need to use a writable input to the custom widget which will store the current time remaining. When you add a prop to a custom widget, note the writeable button on the far left. What this means is that the custom widget can change the value of this and use a tulip integer as the true determinant of when to stop the timer. This will require refactoring your code a bit and doing the getValue() call every second.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/2/28c77292a7c6f61fb6e5d07e6e706ff10427a539.png)

Once this is set up, you can easily build a tulip button to trigger a change in this input prop. For example, a button to reset the timer to 60 seconds.

---

<div class="post-metadata">

**Author:** ![dataabsolute](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/dataabsolute/32/8790_2.png) [@dataabsolute](https://community.tulip.co/u/dataabsolute)\
**Post date:** [July 16, 2025, 7:06am UTC](https://community.tulip.co/t/javascript-timer-reset-time/11565/3 "2025-07-16T07:06:59Z")

</div>

> [@0343699](#):
>
> label { display:inline; color: green; font-family: Verdana, sans-serif, Arial; font-size: 40px; font-weight: bold; text-decoration: none; }

You should try this. I hope it will be helpful for you.  
Click “Variables” → Create new variable:  
Name: `should_reset_timer`  
Type: Boolean  
Initial Value: `false`  
in HTML

```auto
<p>
  <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds"
    >00</span
  >
</p>

```

in js

```auto
let timer = {
  totalSeconds: 0,
  intervalId: null,

  start: function () {
    this.intervalId = setInterval(this.setTime.bind(this), 1000);
  },

  setTime: function () {
    ++this.totalSeconds;
    document.getElementById("hours").innerText = this.twoDigits(
      Math.floor(this.totalSeconds / 3600)
    );
    document.getElementById("minutes").innerText = this.twoDigits(
      Math.floor(this.totalSeconds / 60) % 60
    );
    document.getElementById("seconds").innerText = this.twoDigits(
      this.totalSeconds % 60
    );
  },

  twoDigits: function (n) {
    return n <= 9 ? "0" + n : n;
  },

  reset: function () {
    clearInterval(this.intervalId);
    this.totalSeconds = 0;
    this.updateDisplay();
    this.start();
  },

  updateDisplay: function () {
    document.getElementById("hours").innerText = this.twoDigits(
      Math.floor(this.totalSeconds / 3600)
    );
    document.getElementById("minutes").innerText = this.twoDigits(
      Math.floor(this.totalSeconds / 60) % 60
    );
    document.getElementById("seconds").innerText = this.twoDigits(
      this.totalSeconds % 60
    );
  },
};

// Start timer
timer.start();

// Check reset signal
async function checkResetSignal() {
  const reset = await getValue("should_reset_timer");
  if (reset) {
    timer.reset();
    await setValue("should_reset_timer", false); // Reset the flag
  }
}

// Poll for reset flag every 500ms
setInterval(checkResetSignal, 500);

```

Add a Reset Button in your app → Trigger → `Set Variable should_reset_timer = true`.