CODEWITHSUNDEEP
javascript
tsvetoslav
tsvetoslav

Reputation: 13

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

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>

Upvotes: 0

Views: 41

Answers (2)

Daniel Beck
Daniel Beck

Reputation: 21524

Your code isn't working because you removed the DOM nodes your code is trying to write its results to.

document.getElementById("month") is looking for an element in the DOM with an ID of "month". If it doesn't find anything, it returns null, so when you try to write data into its innerHTML later it errors out.

Including the necessary DOM nodes works fine:

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;

}
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div id="month"></div>
<div id="date"></div>
<div id="year"></div>

Upvotes: 1

Kyle
Kyle

Reputation: 1503

The issue is when the dom element doesn't exist, the JS is throwing an error which is stopping the rest of the code from executing. The reason it always worked for hours is that was the first item you were setting in your js - so the error wouldn't have occurred yet. Try checking for existence first (this way you can do as you were looking for - you can conditionally have those elements and only have 1 if that's your use case).

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;

    }

    if(hours){hours.innerHTML = h;}
    if(minutes){minutes.innerHTML = m;}
    if(seconds){seconds.innerHTML = s;}
    if(month){month.innerHTML = mm;}
    if(year){year.innerHTML = yy;}
    if(date){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 = "minutes">111</div>
  <script src="script.js"></script>
</body>

</html>

Upvotes: 0

Related Questions