why html is displaying given elements by js script but not others?

by

it is my first question here.
So I have this js linked to html file.
When I type for example it displeys the hours from js, but I cant make it display anything else by changing id to "seconds" or creating new element with another id. Why is this happening. I deleted all my css and all my body tag. Just one element with different id and only id = "hours" displays it correctly. Before that I managed to display every single one of them.
The point is to have a clock that displays time and date and the time to be refreshed every second so if u stay on the page to be changed.
I have read for hours posts about loading and DOM trees, but cant figure it out.
Thank you in advance. I apreciate it.
JS:

window.onload = function () {
    someFunction();

function someFunction(){
    setInterval(clock, 1000);}


}
function clock() {
    var hours = document.getElementById("hours");
    var minutes = document.getElementById("minutes");
    var seconds = document.getElementById("seconds");
    var month = document.getElementById("month");
    let year = document.getElementById("year");
    let date = document.getElementById("date");

    var h = new Date().getHours();
    var m = new Date().getMinutes();
    var s = new Date().getSeconds();
    var mm = new Date().getMonth();
    let yy = new Date().getYear();
    let dd = new Date().getDate();


    if (h > 24) {
        h = h - 24;
    }

    h = h < 10 ? "0" + h : h;
    m = m < 10 ? "0" + m : m;
    s = s < 10 ? "0" + s : s;
    yy = yy % 100;
    yy = `20${yy}`;

    switch (mm) {
        case '0':
            mm = 'Януари'
            break;
        case 1:
            mm = 'Февруари'
            break;
        case 2:
            mm = 'Март'
            break;
        case 3:
            mm = 'Април'
            break;
        case 4:
            mm = 'Май'
            break;
        case 5:
            mm = 'Юни'
            break;
        case 6:
            mm = 'Юли'
            break;
        case 7:
            mm = 'Август'
            break;
        case 8:
            mm = 'Септември'
            break;
        case 9:
            mm = 'Октомври'
            break;
        case 10:
            mm = 'Ноември'
            break;
        case 11:
            mm = 'Декември'
            break;

    }

    
    hours.innerHTML = h;
    minutes.innerHTML = m;
    seconds.innerHTML = s;
    month.innerHTML = mm;
    year.innerHTML = yy;
    date.innerHTML = dd;

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

<head>
  <meta charset="UTF-8">
  <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.gstatic.com">
</head>

<body>
  <div id = "hours">111</div>
  <script src="script.js"></script>
</body>

</html>

84 thoughts on “why html is displaying given elements by js script but not others?”