Stopwatch not incrementing JavaScript

user_5414202 0
Viewed 46

I made a simple clock and used a button to switch to a stopwatch. Since I couldn't figure out a better solution I duplicated the container, asigned a function that toggles display on/off on the containers to swap between the clock and stopwatch so that it remains in the same position. I don't understand why my stopwatch is not incrementing and what I should do to solve this problem. Any help would be appreciated. Here's my code:

<div id="container">
    <div id="clock">
        <span id="back">88:88:88</span>
        <span id="front">00:00:00</span>

    <div class="buttons">
        <button id="button-left" onclick="myFunction()"><i class="fas fa-stopwatch"></i></button>
        <button id="button-stop"><i class="fa-solid fa-stop"></i></button>
        <button id="button-play" ><i class="fa-solid fa-play"></i></button>
        <button id="button-right"><i class="fa-solid fa-delete-left"></i></button>
    </div>
</div>
</div>

<div id="container-2">
    <div id="clock-2">
        <span id="back-2">88:88:88</span>
        <span id="front-2">00:00:00</span>

    <div class="buttons-2">
        <button id="button-left-2" onclick="myFunction()"><i class="fas fa-stopwatch"></i></button>
        <button id="button-stop-2" onclick="stopSW()"><i class="fa-solid fa-stop"></i></button>
        <button id="button-play-2" onclick="startSW()"><i class="fa-solid fa-play"></i></button>
        <button id="button-right-2" onclick="reset()"><i class="fa-solid fa-delete-left"></i></button>
    </div>
</div>
</div>
    function myFunction() {
    var x = document.getElementById("container-2");
    let y = document.getElementById("container");
    if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none";
    } else {
        x.style.display = "none";
        y.style.display = "block";
    }
}

function startSW() {
    clearInterval(stopwatch);
    start = setInterval(stopwatch, 1000);
}

function stopSW() {
    clearInterval(start);
}

function reset(){
    clearInterval(stopwatch);
    document.getElementById("front-2").innerHTML = "00:00:00";
}


    function stopwatch() {
    let hours = 0;
    let minutes = 0;
    let seconds = 0;
    let displayHours = 0;
    let displayMinutes = 0;
    let displaySeconds = 0;

    seconds++;

    if(seconds == 60){
        seconds = 0;
        minutes++;

        if(minutes == 60) {
            minutes = 0;
            hours++;
        }
    }

    if (seconds < 10){
        displaySeconds = "0" + seconds;
    } else {
        displaySeconds = seconds;
    }

    if (minutes < 10){
        displayMinutes = "0" + minutes;
    } else {
        displayMinutes = minutes;
    }

    if (hours < 10){
        displayHours = "0" + hours;
    } else {
        displayHours = hours;
    }

    let stopwatchNow = displayHours + ":" + displayMinutes + ":" + displaySeconds;
    document.getElementById("front-2").innerHTML = stopwatchNow;
}
javascript
3 Answers

Hello at the start of your stopwatch function you set

    let hours = 0;
    let minutes = 0;
    let seconds = 0;
    let displayHours = 0;
    let displayMinutes = 0;
    let displaySeconds = 0;

and that's what you display later in the code, you need to define this variables outside of this function

user_83820070

This is because in function stopwatch, every time this function runs you set

let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;

These variables will always be 0, since you set them when function runs. In order to fix this, you need to move them outside the function:

let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;

function stopwatch(){
    // removed
    
    seconds++; // this stays here
    // the rest of your code goes in here
}

This way your variables won't reset to 0 when function starts to run

user_176637170 

<div id="container-2">
    <div id="clock-2">
        <span id="front-2">00:00:00</span>
        --- >>
        <span id="back-2">88:88:88</span>
    </div>
</div>

    <div class="buttons-2">
        <button id="button-left-2" onclick="myFunction()"><i class="fas fa-stopwatch"></i>fun</button>
        <button id="button-stop-2" onclick="stopSW()"><i class="fa-solid fa-stop"></i>stop</button>
        <button id="button-play-2" onclick="startSW()"><i class="fa-solid fa-play"></i>start</button>
        <button id="button-right-2" onclick="reset()"><i class="fa-solid fa-delete-left"></i>reset</button>
    </div>

<script>
  
  
function myFunction() {
    var node = document.getElementById("back-2");
    display(node);
}
  
var start;
function startSW() {
    clearInterval(start);
    start = setInterval(stopwatch, 1000);
}

function stopSW() {
    clearInterval(start);
}

function reset(){
    clearInterval(start);
    document.getElementById("front-2").innerHTML = "00:00:00";
    document.getElementById("back-2").innerHTML = "00:00:00";
    hours = 0;
    minutes = 0;
    seconds = 0;
}

    var hours = 0;
    var minutes = 0;
    var seconds = 0;

function stopwatch() {console.log('stopwatch')

    seconds++;

    if(seconds == 60){
        seconds = 0;
        minutes++;

        if(minutes == 60) {
            minutes = 0;
            hours++;
        }
    }
                      
    display();
                      
}

function display(node){
  

    let displayHours = 0;
    let displayMinutes = 0;
    let displaySeconds = 0;
                          
    if (seconds < 10){
        displaySeconds = "0" + seconds;
    } else {
        displaySeconds = seconds;
    }

    if (minutes < 10){
        displayMinutes = "0" + minutes;
    } else {
        displayMinutes = minutes;
    }

    if (hours < 10){
        displayHours = "0" + hours;
    } else {
        displayHours = hours;
    }

    let stopwatchNow = displayHours + ":" + displayMinutes + ":" + displaySeconds;
  
    if(!node)node=document.getElementById("front-2");
    node.innerHTML = stopwatchNow;
}
</script>

there were a variety of mistakes,

clearInterval not being given the correct value

the time variables needed to be declared in global scope

i can only guess what myfunction is supposed to be doing

etc...

have fun

user_103609660
Related