Create a time of 00:19:59 using JavaScript

I am attempting to display a countdown timer that starts at 20 minutes in the format (00:20:00) using setInterval. Once the countdown is finished, it should display as (00:00:00), but I am having trouble achieving this.

<body onload = "onloadFunc();">
<span id="minute"></span> <span id="second"></span> 
<script type="text/javascript">
var interval;
function onloadFunc(){

    secondDown();
    interval = setInterval(secondDown, 1000);
}
 var countsec = 60;
 function secondDown(){
 document.getElementById("second").innerHTML = countsec;
 countsec--;
if(countsec == -1){
 minuteDown();
 interval = setInterval(minuteDown,60000);
 countsec = 60
}
}
var countmin = 20;
function minuteDown()
{
    document.getElementById("minute").innerHTML = countmin;
    countmin--;
    if(countmin == -1)
    {
        clearInterval(interval);
    }
}
</script>
</body>

Answer №1

One interval simplifies the process:

var seconds, minutes, interval;
function onloadFunc(){
    seconds=parseInt(document.getElementById("second").innerText);
    minutes=parseInt(document.getElementById("minute").innerText);
    interval = setInterval(tick, 1000);
}
function tick() {
  if (seconds > 0) {
    seconds--;
  } else { 
      if (minutes > 0) {
          minutes--;
          seconds=59; 
          document.getElementById("minute").innerText = minutes;
      } else { 
          clearInterval(interval);
      }
  }
  document.getElementById("second").innerText = seconds < 10 ? "0"+ seconds : seconds; 
}
20:00

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

convert a JSON object to an array using jQuery

Can anyone help me with converting an object into an array using jQuery? [["20"],["30"],["45"],["54"],["33"],["15"],["54"],["41"]] I am looking to achieve an array output like this: [20,30,45,54,33,15,54,41] Any suggestions on how to accomplish this? ...

What is the best way to use ajax to load a particular div or class from a file?

In my main.html file, there are several divs each with 2 classes. The first is their specific class and the second is a class called menu-item, which determines if an event will be triggered when clicked. For example: <div id="load-here"> </div ...

Error in Laravel npm package

Working on my Laravel project, I encountered an issue while trying to implement a video chat feature using https://github.com/PHPJunior/laravel-video-chat?ref=madewithlaravel.com with laravel-echo-server. Despite trying various solutions, none seemed to wo ...

Utilize Optional Chaining for verifying null or undefined values

I have utilized the following code: data?.response[0]?.Transaction[0]?.UID; In this scenario, the Transaction key is not present, resulting in the error message: ERROR TypeError: Cannot read properties of undefined (reading '0') Instead of chec ...

Arranging a string array in JavaScript according to an integer array

Looking at the provided javascript arrays: letterArray ['a', 'e', 'i', 'o', 'u'] We also have another array that corresponds to it: valueArray [12, 22, 7, 7, 3] The goal is to sort the valueArray into: ...

Error: Unable to execute candidate.toLowerCase as a function

Encountering the following errors: `Uncaught TypeError: candidate.toLowerCase is not a function. I am utilizing the AutoComplete API within Material UI, however, when I search in the input field, it leads me to a blank page. This is my current code snippe ...

Guide to updating a database using ajax and javascript in asp.net mvc without the need to refresh the page

Is there a way to update the value of an enumdropdownlist from "active" to "inactive" in my database through an ajax call without having to refresh the page? I am unsure whether to use a javascript method or ajax.beginform for this task. I attempted to us ...

Revamp the current webpage to display attribute values in textual format

As I peruse a webpage, I notice that there is room for improvement in terms of user-friendliness. The page is filled with a list of movie titles, each accompanied by a link to IMDb. However, the IMDB user rating is only visible when hovering over the titl ...

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

Imagine I have the following HTML structure: <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor ...

What is the best way to design a bookmarklet that can overlay an HTML/div layer and apply CSS styles from an

Is there a way to incorporate a bookmarklet that can bring in a new layer/div with additional HTML and CSS from an external file, overlaying it on the current page? If anyone has an example of a bookmarklet that achieves this, would you be willing to shar ...

I am encountering an issue with my function where I aim to prevent the creation of a node using duplicate coordinates

Trying to avoid creating a node with existing coordinates, I implemented a check in my code. The check is supposed to determine if there are any nodes with the same coordinates already present. However, it seems that the check is not working as expected an ...

The word "yargs" will not activate a command within a script

I have a NodeJs script that requires parsing command line arguments. Here is the code I have written: import yargs from "yargs"; import { hideBin } from 'yargs/helpers'; //.... yargs(hideBin(process.argv)).command('--add-item ...

Is there a way to identify and retrieve both the initial and final elements in React?

Having an issue with logging in and need to retrieve the first and last element: Below is my array of objects: 0: pointAmountMax: 99999 pointAmountMin: 1075 rateCode: ['INAINOW'] roomPoolCode: "ZZAO" [[Prototype]]: Object 1: pointAmoun ...

Passing arguments to EJS view with Express

As a newcomer to Node.js/Express/EJS, I've made an interesting observation. I've realized that if I pass arguments from an Express request handler to an EJS view without specifying the argument name, it automatically assigns a name based on the v ...

Why does the MEAN Stack continue to route using the '#' symbol in the URL?

Currently navigating the realm of back end development. Started off by following a guide on express from thinkster. In need of some clarification. Initially, I grasped that front-end and back-end routing serve different purposes. Front-end routing relates ...

Is it possible to utilize Javascript instead of PHP Curl to present JSON API data?

After successfully displaying JSON API data from openweathermap.org on my HTML webpage using PHP Curl, I am now seeking help to achieve the same output using Javascript. My PHP script retrieves JSON data from the source, and here is a snippet of that PHP c ...

Encounter a parameter validation error

Just a quick question. I have a JS function that takes a parameter as input. If the passed value happens to be NULL, I want to handle it accordingly. However, my limited experience with JS is making it difficult for me to use the correct syntax. Here' ...

Switch image formats to webp using react js

Utilizing the react-dropzone package, I aim to incorporate images into my application. To achieve this, I must send the images to a firebase server after managing image conversions. Whilst browsing through YouTube tutorials, I came across a guide demonstr ...

TestingCompilerFactory is not available as a provider

Currently troubleshooting my test file to identify the issue that is hindering a successful test run: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { Component, Directive, Input, OnInit } from '@angula ...

PHP response triggers AJAX autocomplete functionality in JavaScript

The autocomplete hints are not displaying any response for me. Here is the jQuery code that I am using: jQuery( ".newtag_new" ).autocomplete({ minLength: 0, source: function( request, response ) { jQuery.ajax({ type: 'GET ...