-1

I'm making a stopwatch, and my codes is supposed to make the "start" button turn to "stop" button whenever I click on the "start" button and the opposite. My start button seems to work but when I try to switch it to "stop" it doesn't work. I don't know what is wrong, anybody can help me? Thank you so much!

This is my js:

let hours = 0
let seconds = 0
let minutes = 0

//define var to hold 'display' value
    let displaySeconds = 0
    let displayMinutes = 0
    let displayHours = 0

//var to hold "setInterval" function
    let interval = null

//Define var to hold stopwatch status

    let status = "stopped"

//functions(logic to determine when to increment values,...)

function stopWatch() {
    seconds++;

    //logic to determine when to flip to next next value

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

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

    }

    //if second, minute, hrs are only one digits, add a leaing 0 to the value
    if(seconds < 10){
        displaySeconds = "0" + seconds.toString()
    }else{
        displaySeconds = seconds
    }

    if(minutes < 10){
        displayMinutes = "0" + minutes.toString()
    }else{
        displayMinutess = minutes
    }

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


    //display updated time values to user
    document.getElementById('display').innerHTML = displayHours + ':' + displayMinutes + ":" + displaySeconds
}



function startStop(){
    if(status === "stopped"){
        //start the stopwatch by calling setInterval function
        interval = window.setInterval(stopWatch, 1000)
        document.getElementById('startStop').innerHTML = "stop"
        status:"started"
    }
    else{
        window.clearInterval(interval)//stop interval from running
        document.getElementById('startStop').innerHTML = "start"
        status = "stopped"
    }
}

This is my html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet"  href="style.css">
</head>
<body>
    <div class="container">
        <div id="display">
            00:00:00
        </div>
        <div class="button">
            <button id="startStop" onclick="startStop()">Start</button> 
            <button id="reset">Reset</button>

        </div>

    </div>


    <script src="index.js"></script>
</body>
</html>
Alireza Ahmadi
  • 8,579
  • 5
  • 15
  • 42
Ashley
  • 73
  • 6

1 Answers1

1

It is because you are using status: "started" instead of status = "started", you are writing the following statement inside the if block

if(status === "stopped"){
    interval = window.setInterval(stopWatch, 1000)
    document.getElementById('startStop').innerHTML = "stop"
    status = "started"
}
Anonymous Coder
  • 556
  • 2
  • 16