title: Can I use setInterval to regularly rewrite a <span> on a page
body: <p>I don't know any javascript but was trying to get my head around the following code.</p>
  
  <p>I was given the below code to fire a message to users dependant on time.</p>
  
  <pre><code>now = new Date();
  if (now.getUTCHours() &gt;= 12) {
      document.write('`&lt;span id="NextorNot" style="color:red;"&gt;`It is too late to enter`&lt;/span&gt;`');
  }
  else {
      document.write('`&lt;span id="NextorNot" style="color:green;"&gt;`You can still enter`&lt;/span&gt;`');
  }
  </code></pre>
  
  <p>This worked fine but what I wanted to make it update itself at a regular interval for anyone sat on the page for a long period of time would see current information. After lots of reading and I got as far as this but I can't see where I am going wrong.</p>
  
  <pre><code>now = new Date();  
  if (now.getUTCHours() &gt;= 12)   {  
      document.write('`&lt;span id="NextorNot" style="color:red;"&gt;`It is too late to enter`&lt;/span&gt;`');  
  }  
  else {  
      document.write('`&lt;span id="NextorNot" style="color:green;"&gt;`You can still enter`&lt;/span&gt;`');  
  }  
  setInterval(
     function() {  
        if (now.getUTCHours() &gt;= 12) {  
          document.getElementById('NextorNot').style.color = 'red';  
          document.getElementById('NextorNot').innerHTML = 'It is too late to enter');  
        }  
        else {  
          document.getElementById('NextorNot').style.color = 'green';  
          document.getElementById('NextorNot').innerHTML = 'You can still enter');  
        }  
     },  
     5000
  );  
  </code></pre>
  
  <p>Could anyone help?</p>