Show the present time pulled from the timer

Question

Show the present time pulled from the timer

I am in possession of a countdown timer that starts at zero and counts up to 100. The timer displays the count in a p tag with the ID of countdowntimer.

I am attempting to show the current time when I click a button while the timer is running.

Additionally, I would like to reset the timer after clicking the button.

Do you have any suggestions on how I can accomplish this task?

var timeleft = 1;
    var downloadTimer = setInterval(function(){
    timeleft++;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft >= 100)
        clearInterval(downloadTimer);
    },1000);
    
    
    function timenow()
{
var timenow=document.getElementById("timetaken").textContent = timeleft;

}

<p> Time   <span id="countdowntimer">0 </span></p>
<p> Time  Taken  <span id="timetaken">0 </span></p>
<button onclick="timenow">Click to view time taken</button>

javascript html css

Answer 1

Answer №1

Ensure that your onclick function event is properly bound. To reset the timer, simply set the timeleft variable to 0 within the button click function

var timeleft = 1;
    var downloadTimer = setInterval(function(){
    timeleft++;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft >= 100)
        clearInterval(downloadTimer);
    },1000);
    
    
    
    function timenow()
{
  document.getElementById("timetaken").textContent = timeleft;
  timeleft=0;
  document.getElementById("countdowntimer").textContent = timeleft;
}

<p> Time   <span id="countdowntimer">0 </span></p>
<p> Time  Taken  <span id="timetaken">0 </span></p>
<button onclick="timenow()">Click to viw time taken</button>

Answer 2

Ensure that your onclick function event is properly bound. To reset the timer, simply set the timeleft variable to 0 within the button click function

var timeleft = 1;
    var downloadTimer = setInterval(function(){
    timeleft++;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft >= 100)
        clearInterval(downloadTimer);
    },1000);
    
    
    
    function timenow()
{
  document.getElementById("timetaken").textContent = timeleft;
  timeleft=0;
  document.getElementById("countdowntimer").textContent = timeleft;
}

<p> Time   <span id="countdowntimer">0 </span></p>
<p> Time  Taken  <span id="timetaken">0 </span></p>
<button onclick="timenow()">Click to viw time taken</button>

Answer 3

Answer №2

To start, it is important to trigger the function on the onclick event. Additionally, ensure that you reset the timeleft value within that function.

Your revised code should resemble the following:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p> Time <span id="countdowntimer">0 </span></p>
    <p> Time Taken <span id="timetaken">0 </span></p>
    <button onclick="timenow()">Click to view time taken</button> <!-- Updated timenow to timenow() -->

    <script>
        var sum = 0;
        var timeleft = 1;
        var downloadTimer = setInterval(function () {
            timeleft++;
            document.getElementById("countdowntimer").textContent = timeleft;
            if (timeleft >= 100)
                clearInterval(downloadTimer);
        }, 1000);



        function timenow() {
            sum += timeleft;
            var timenow = document.getElementById("timetaken").textContent = sum;
            timeleft = 0;
            document.getElementById("countdowntimer").textContent = timeleft;
        }   
    </script>
</body>

</html>

Answer 4

To start, it is important to trigger the function on the onclick event. Additionally, ensure that you reset the timeleft value within that function.

Your revised code should resemble the following:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p> Time <span id="countdowntimer">0 </span></p>
    <p> Time Taken <span id="timetaken">0 </span></p>
    <button onclick="timenow()">Click to view time taken</button> <!-- Updated timenow to timenow() -->

    <script>
        var sum = 0;
        var timeleft = 1;
        var downloadTimer = setInterval(function () {
            timeleft++;
            document.getElementById("countdowntimer").textContent = timeleft;
            if (timeleft >= 100)
                clearInterval(downloadTimer);
        }, 1000);



        function timenow() {
            sum += timeleft;
            var timenow = document.getElementById("timetaken").textContent = sum;
            timeleft = 0;
            document.getElementById("countdowntimer").textContent = timeleft;
        }   
    </script>
</body>

</html>

Show the present time pulled from the timer

Answer №1

Answer №2

Similar questions

In Internet Explorer 7, a newline within a <pre> tag may cause display issues

What is the best way to retrieve the index of the chosen option from a select element in Angular when

What is the best way to ensure all my borders are uniform in size?

Leverage the power of dynamic PHP variables within your JavaScript code

Unable to get jQuery plugin to function properly within a .vue component

Adding dynamic values to nested form groups in Angular Form Array

Can you explain how to break down secured routes, users, and posts all within a single .create() function in Mongoose/JavaScript

What is the best way to establish a connection between two applications using React and Node

steps for setting up socket.io client

Tips for Printing a div Element with Horizontal Scrollbars

Sorting custom strings in Javascript with special characters like dash (-) and underscore (_)

Issue with Nextjs: getServerSideProps causing a blank page to display instead of redirecting to 404errorCode

Gesture scrolling transferred to elements under the currently scrolled element

working with css to rearrange 3 divs

Struggling to make a div appear right at the top of the page

Are there any methods to create a profile page that adjusts to different screens, such as mobile and desktop, ensuring a seamless user

Enclosing values in JavaScript literals

What could be causing the HTML content to not display when the code is executed?

Merging audio files using Node Stream

Retrieve JSON data from the AJAX event's onreadystatechange function