How can I show the time (generated by JavaScript) in a specific div?

Question

While learning JavaScript, I found the following code:

function printTime() {
  var d = new Date();
  var hours = d.getHours();
  var mins = d.getMinutes();
  var secs = d.getSeconds();
  document.body.innerHTML = hours+":"+mins+":"+secs;
}

setInterval(printTime, 1000);

In Codepen this does not show anything while the HTML and CSS sections are empty. The main question is: how can I insert the generated time on a specific place in the HTML document?

For example, the time should be placed in this div:

<div id="time" class="main__section--time">
    /* show time here */
</div>

How can I link this function to an ID or class to show the output in this div?

Answer 1

You have to modify your printTime function like this:

function printTime() {
  var d = new Date();
  var hours = d.getHours();
  var mins = d.getMinutes();
  var secs = d.getSeconds();
  // select the div by its id
  document.getElementById("time").innerHTML = hours+":"+mins+":"+secs;
}

Try it in the snippet below:

 function printTime() { var d = new Date(); var hours = d.getHours(); var mins = d.getMinutes(); var secs = d.getSeconds(); document.getElementById("time").innerHTML = hours+":"+mins+":"+secs; } setInterval(printTime, 1000); 

 <div id="time" class="main__section--time"> </div> 

Answer 2

而不是document.body.innerHTML你只需使用document.getElementById("time").innerHTML

Answer 3

You can use the document.querySelector API together with a CSS selector to reference a specific element on the page.

 var timeDisplayElement = document.querySelector('#my-time'); function printTime() { var d = new Date(); var hours = d.getHours(); var mins = d.getMinutes(); var secs = d.getSeconds(); timeDisplayElement.innerHTML = hours+":"+mins+":"+secs; } setInterval(printTime, 1000); 

 <div id="my-time"></div> 

Answer 4

使用document.getElementById("time").innerHTML = ...

Answer 5

You need to specify the div's id with

document.getElementById ("time")

And then access to it's innerHTML property

function printTime() { 
     var d = new Date(); 
     var hours = d.getHours(); 
     var mins = d.getMinutes(); 
     var secs = d.getSeconds();
     document.body.innerHTML= hours+":"+mins+":"+secs;
}  
 setInterval(printTime, 1000);