Uncaught ReferenceError, it says startTimer is not defined even though it is

Question

const startBtn = document.querySelector('.startBtn');
const pauseBtn = document.querySelector('.pauseBtn');
const ResetBtn = document.querySelector('.resetBtn');
const time = document.querySelector('.time');

let seconds = 0;
let secondsStr = '00';
let minutes = 0;
let minutesStr = '00';
let hours = 0;
let hoursStr = '00';
let timeText = `${hoursStr}:${minutesStr}:${secondsStr}`;
time.textContent = timeText;

function addSecond() {
    seconds++;
    secondsStr = seconds.toString();
    if (seconds < 10) {
        secondsStr = `0${secondsStr}`;
    }
    
    if(seconds >= 60) {
        seconds = 0;
        minutes++;
        minutesStr = minutes.toString();
        if (minutes < 10) {
            minutesStr = `0${minutesStr}`;
        }
        
        if(minutes >= 60) {
            minutes = 0;
            hours++;
            hoursStr = hours.toString();
            if (hours < 10) {
                hoursStr = `0${hoursStr}`;
            }
        }
    }
    timeText = `${hoursStr}:${minutesStr}:${secondsStr}`;
    time.textContent = timeText;
}

startBtn.addEventListener('click', startWatch);
pauseBtn.addEventListener('click', pauseWatch);

function startWatch() {
    const startTimer = setInterval(addSecond, 1000);
}

function pauseWatch() {
    clearInterval(startTimer);
}

<div class="stopwatch">
        <div class="time"></div>
        <div class="stopwatchBtns">
            <button class="startBtn stopwatchBtn">Start</button>
            <button class="pauseBtn stopwatchBtn">Pause</button>
            <button class="resetBtn stopwatchBtn">Reset</button>
        </div>
    </div>

basically when the pauseWatch function is called i want it to clear the startTimer interval but it says that it is not defined even though it is im not sure if its to do with the variable scope but even if it is i dont know how to fix it

i tried rearranging some code but nothing seem to help at all

`startTimer` seems to be a local variable to `startWatch` function, it's not accessible outside of that function. See https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript — Teemu, Mar 15 '23 at 11:54
@Teemu ive had a look at that but i still dont know how to make it a global variable — Randomguy660, Mar 15 '23 at 12:01
??? You've already declared several global variables in your code. Just make an assignment only in the function, do the variable declaration in the same part of code you've declared `seconds` and other `let` variables (`startTimer` can't be declared as constant, because you've to change its value after declaration). — Teemu, Mar 15 '23 at 12:03

score 1 · Accepted Answer · answered Mar 15 '23 at 12:17

You need to define the startTimer variable in the global scope (outside of the function). This will allow it to be used outside of your startWatch() function.

const startBtn = document.querySelector('.startBtn');
const pauseBtn = document.querySelector('.pauseBtn');
const ResetBtn = document.querySelector('.resetBtn');
const time = document.querySelector('.time');

let seconds = 0;
let secondsStr = '00';
let minutes = 0;
let minutesStr = '00';
let hours = 0;
let hoursStr = '00';
let timeText = `${hoursStr}:${minutesStr}:${secondsStr}`;
time.textContent = timeText;

let startTimer; // define variable in global scope

function addSecond() {

...

raza ramadhani · Answer 2 · 2023-03-15T12:20:26.477

0

The StartTimer is inside a function, where it cannot be called. I added var startTimer; at the beginning of the code and i edited the function startWatch() a bit

var startTimer;

function startWatch() {
    startTimer = setInterval(addSecond, 1000);
}

Try https://replit.com/@JLRR222/problem#index.html

edited Mar 15 '23 at 12:20

answered Mar 15 '23 at 12:13

raza ramadhani

33
6

Uncaught ReferenceError, it says startTimer is not defined even though it is

2 Answers2