title: Why clock time is not being shown?
body: <p>I am trying to make a simple task manager. I added a clock at the top of the page and after a few check list I added few codes that will show me how much time of the day is left. I got that from my question: <a href="https://stackoverflow.com/questions/67968752/how-can-i-code-a-clock-to-show-me-that-how-much-time-is-left-of-the-day/67968868?noredirect=1#comment120135422_67968868">How can I code a clock to show me that how much time is left of the day?</a>
  I took the second answer and it was working separately as I wanted. But after I inserted that code to my main code the time is not being shown. It's just blank.
  Here's my code:</p>
  <pre><code>    &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;title&gt;Task Achievement&lt;/title&gt;
          &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Concert+One&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
          &lt;script&gt;
              function myFunction(item) {
                  if (item.checked) {
                      item.parentNode.style.backgroundColor = &quot;#8db600&quot;;
                  } else {
                      item.parentNode.style.backgroundColor = &quot;transparent&quot;;
                  }
              }
  
              
              
          &lt;/script&gt;
          &lt;style&gt;
              table { border:solid 1px #8db600; }
              body {
                  background-color: #7ef9ff;
              }
  
              @import url('');
  
  #clock {
      margin: auto;
      width: 300px;
      height: 50px ;
      background-color: black;
    font-family: &quot;Concert One&quot;;
    color: #7ef9ff;
    font-size: 48px;
    
    text-align: center;
    padding: 5px 5px 5px 5px;
   }
   #task {
       width: 300px;
       margin: auto;
       color: #7ef9ff;
       background-color: black;
       font-family: &quot;Concert One&quot;;
  
   }
   #tab {
       font-family: &quot;Concert One&quot;;
      
  
   }
  
             
          &lt;/style&gt;
      &lt;/head&gt;
  &lt;body&gt;
              
  
  
          &lt;div id=&quot;clock&quot;&gt;&lt;/div&gt;
          &lt;script&gt;function currentTime() {
              var date = new Date(); /* creating object of Date class */
              var hour = date.getHours();
              var min = date.getMinutes();
              var sec = date.getSeconds();
              if (hour &gt; 12){
              hour = hour - 12;
  
              }
              else{
                  hour = hour;
              }
              hour = updateTime(hour);
              min = updateTime(min);
              sec = updateTime(sec);
              document.getElementById(&quot;clock&quot;).innerText = hour + &quot; : &quot; + min + &quot; : &quot; + sec; /* adding time to the div */
                var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
            }
            
            function updateTime(k) {
              if (k &lt; 10) {
                return &quot;0&quot; + k;
              }
              else {
                return k;
              }
            }
            
            currentTime(); /* calling currentTime() function to initiate the process */&lt;/script&gt;
  
          &lt;div id=&quot;task&quot;&gt;
              &lt;h4 align = 'center'&gt;Today's Accomplishments&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id=&quot;tab&quot;&gt;
          &lt;table align=&quot;center&quot; #8db600&quot; CELLSPACING=0&gt;
              &lt;tr&gt;
                  &lt;td id=&quot;box&quot;&gt;
                      Vocab&lt;input type=&quot;checkbox&quot; name=&quot;block&quot; id=&quot;block&quot; onclick=&quot;myFunction(this)&quot;&gt;
                  &lt;/td&gt;
                  &lt;td id=&quot;box&quot;&gt;
                      SAT-Math&lt;input type=&quot;checkbox&quot; name=&quot;block&quot; id=&quot;block&quot; onclick=&quot;myFunction(this)&quot;&gt;
                  &lt;/td&gt;
                  &lt;td class=&quot;box&quot;&gt;
                      SAT-Reading&lt;input type=&quot;checkbox&quot; name=&quot;block&quot; id=&quot;block&quot; onclick=&quot;myFunction(this)&quot;&gt;
                  &lt;/td&gt;
                  &lt;td class=&quot;box&quot;&gt;
                      SAT-Writing&lt;input type=&quot;checkbox&quot; name=&quot;block&quot; id=&quot;block&quot; onclick=&quot;myFunction(this)&quot;&gt;
                  &lt;/td&gt;
                  &lt;td class=&quot;box&quot;&gt;
                      Chemistry&lt;input type=&quot;checkbox&quot; name=&quot;block&quot; id=&quot;block&quot; onclick=&quot;myFunction(this)&quot;&gt;
                  &lt;/td&gt;
                  &lt;td class=&quot;box&quot;&gt;
                      Math&lt;input type=&quot;checkbox&quot; name=&quot;block&quot; id=&quot;block&quot; onclick=&quot;myFunction(this)&quot;&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;/div&gt;
  
          &lt;div id=&quot;clock&quot;&gt;&lt;/div&gt;
      &lt;script&gt;function currentTime() {
          var toDate=new Date();
    var tomorrow=new Date();
    tomorrow.setHours(24,0,0,0);
    var diffMS=tomorrow.getTime()/1000-toDate.getTime()/1000;
    var diffHr=Math.floor(diffMS/3600);
    diffMS=diffMS-diffHr*3600;
    var diffMi=Math.floor(diffMS/60);
    diffMS=diffMS-diffMi*60;
    var diffS=Math.floor(diffMS);
    var result=((diffHr&lt;10)?&quot;0&quot;+diffHr:diffHr);
    result+=&quot; : &quot;+((diffMi&lt;10)?&quot;0&quot;+diffMi:diffMi);
    result+=&quot; : &quot;+((diffS&lt;10)?&quot;0&quot;+diffS:diffS);
          document.getElementById(&quot;clock&quot;).innerText = result; /* adding time to the div */
            var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
        }
        
        function updateTime(k) {
          if (k &lt; 10) {
            return &quot;0&quot; + k;
          }
          else {
            return k;
          }
        }
        
        currentTime(); /* calling currentTime() function to initiate the process */
        
  &lt;/body&gt;```
  </code></pre>