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

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,

JavaScript
​x
 
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;
}

JavaScript
 
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>

JavaScript
 
<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>

Answer

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>

JavaScript
 
<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>
​

Advertisement

Answer