Q: Why doesn't my digital clock change time in every 1 second which is made by javascript? I am facing some problems with this code. Though I have solved it but I am confused. As we know global variables can be used everywhere. But When I put the declaration part out of the function, the digitalClock() function doesn't work, But it works properly when I kept that declaration part inside the function. If I put the declaration part outside of the function then it does not change time after 1 second, which means setInterval() is not working. I am not able to understand the reason for this problem. I hope, I was able to describe my problem accurately.
Can someone explain this to me?


function digitalClock() {

    // declaration part 
    let clock = new Date();
    let date = clock.getDate();
    let month = clock.getMonth();
    let year = clock.getFullYear()
    let hour = clock.getHours();
    let minute = clock.getMinutes();
    let second = clock.getSeconds();
    let day = clock.getDay();
    let month_name = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    let day_name = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    //date section

    document.querySelector('.date').innerHTML = `${date} ${month_name[month]}  , ${year}`;

    //time section


    if (hour < 10) {
        document.querySelector('.hr').innerHTML = '0' + hour;
    }
    else if (hour > 12 && hour < 22) {
        document.querySelector('.hr').innerHTML = `0${hour - 12}`;
    }
    else if (hour > 21) {
        document.querySelector('.hr').innerHTML = hour - 12;
    }

    if (minute < 10) {
        document.querySelector('.min').innerHTML = '0' + minute;
    }
    else {
        document.querySelector('.min').innerHTML = minute;
    }

    if (second < 10) {
        document.querySelector('.sec').innerHTML = '0' + second;
    }

    else {
        document.querySelector('.sec').innerHTML = second;
    }
    //day section

    document.querySelector('.day').innerHTML = `${day_name[day]}`;

    if (hour > 12) {
        document.querySelector('.am-pm').innerHTML = `PM`;
    }
    else {
        document.querySelector('.am-pm').innerHTML = `AM`;

    }

}

setInterval(digitalClock, 1000);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Poppins:wght@200;300;400;500;600;700&display=swap"
        rel="stylesheet">
</head>

<body>
    <div class="clock">
        <div class="upper-text">
            <h3>12 hr format</h3>
            <h1>digital clock</h1>
        </div>
        <div class="date"></div>
        <div class="time">
            <span class="hr common-css"></span>
            <span class="colon">:</span>
            <span class="min common-css"></span>
            <span class="colon">:</span>
            <span class="sec common-css"></span>
        </div>
        <div class="bottom-sec date">
            <span class="day"></span>
            <span class="am-pm"></span>
        </div>
        <p class="copyright-text">all rights reserved by zannat hema</p>
    </div>

    <script src="./main.js"></script>
</body>

</html>



A: the reason it doesn't work when you place the "declaration" part outside of the function is because you are only calling that section of code once. By putting your "declaration" section in the function, every time you call the function with the setInterval, it is reinitialising those variables, meaning you get an updated output.
