How would you display the time using Javascript in html while html still is running and displaying other stuff

Question

I am making a music player (just to play one song so i can learn more html) and i want it to display the time at the bottom and it seems the only way to do it is with Javascript. I got it to print the time, but it doesnt display any of the html code, only the time shows.

function update() {
  var today = new Date();
  var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
  var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var dateTime = date + ' ' + time;
  document.body.innerHTML = dateTime
}
window.onload = function() {
    update();
    setInterval(update,

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

h1,
h2 {
  background: -webkit-linear-gradient(purple, pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  text-align: center;
  align-content: center;
}

<h2>Hall Of Fame</h2>
<img src=https://dl.dropbox.com/s/uw9v5ro9a6650bd/88DFC197-4C1C-45C4-B8A9-85344796CC74.jpeg? height=150px width=1 50px></img>

<body>
  <h1>Let's listen to some music</h1>
  <div class="audio">

    <audio controls>
            <source src="https://dl.dropboxusercontent.com/s/trelm7752nmamcm/Ireland%20Boys%20x%20NCK%20-%20Hall%20of%20Fame%20%28Official%20Music%20Video%29.mp3" 
        
             type="audio/mpeg"></source>
             
             <source src="https://drive.google.com/file/d/0ByyrPyKgcWhBZ3ViZ19QYllxYjA/view?usp=drivesdk" 
        
             type="audio/mpeg"></source>
            </audio>

  </div>
  <marquee scrollamount=2 direction=right>Ireland boys X NCK - Hall Of Fame</marquee>

`document.body.innerHTML = dateTime` You are setting the entire `body` tag to your time. Change that line to an element to hold the time and not the entire body. — disinfor, Dec 27 '20 at 18:06
Does this answer your question? [HTML/Javascript change div content](https://stackoverflow.com/questions/2554149/html-javascript-change-div-content) — disinfor, Dec 27 '20 at 18:11
Im not sure how to do that, could you link me to a git hub page maybe? — BurnDownTheWorld, Dec 27 '20 at 18:13

score 0 · Accepted Answer · answered Dec 27 '20 at 18:18

you are adding time to entire body, you should try this

<script>
  function update() {
    var timeWrap = document.createElement("div");
    timeWrap.setAttribute("id","timeWrap");
    var timeWrapEle = document.getElementById("timeWrap");
    if(timeWrapEle === null){
      document.body.appendChild(timeWrap);
      var timeWrapEle = document.getElementById("timeWrap");
    }
    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var dateTime = date+' '+time;
    timeWrapEle.innerHTML = dateTime
  }
  window.onload = function() {update(); setInterval(update, 1000);}
</script>

score 0 · Answer 2 · answered Dec 27 '20 at 18:19

0

Add a container to your HTML for the time display...

<div id="timedisplay"></div>

then replace your document.body.innerHTML = dateTime with

let timeContainer = getElementById("timedisplay");
timecontainer.innerHTML = datetime;

answered Dec 27 '20 at 18:19

Three D Fish

144
8

This is a much better solution than the one by Muhammad Taseen. There is no need to add the div to the document using javascript, the document is already composed of static html, so it is better to just add the container for the time to the static html than trying to dynamically create it. – Dan Willett Jan 18 '21 at 20:02

How would you display the time using Javascript in html while html still is running and displaying other stuff

2 Answers2