Call a javascript function automatically without buttons

You're suddenly calling the function showTime, and passing implicitly undefined to the function setTimeout. In your approach you're actually passing a String, which will be evaluated (BAD).

I recommend you to use the function setInterval for repeated calls of a function.

Likewise, use the event DOMContentLoaded to be sure the HTML DOM tree is totally loaded before any DOM manipulation.

function showTime() {
  var timeNow = new Date();
  var hours = timeNow.getHours();
  var minutes = timeNow.getMinutes();
  var seconds = timeNow.getSeconds();
  var timeString = "" + ((hours > 24) ? hours - 12 : hours);
  timeString += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString += (hours >= 12) ? " P.M." : " A.M.";
  document.getElementById('hourshere').textContent = timeString;
}

document.addEventListener("DOMContentLoaded", function(event) {
  showTime();
  setInterval(showTime, 1000);
});

Location where I want to call the function
<li><a href="#"><i class="fa fa-clock-o"></i>
<span id='hourshere'>Hours here</span>
</a></li>

<script language="JavaScript">

function showTime() {
  var timeNow = new Date();
  var hours   = timeNow.getHours();
  var minutes = timeNow.getMinutes();
  var seconds = timeNow.getSeconds();
  var timeString = "" + ((hours > 24) ? hours - 12 : hours);
  timeString  += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString  += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString  += (hours >= 12) ? " P.M." : " A.M.";
  document.htmlClock.timeField.value = timeString;
  //timerID = setTimeout("showTime()", 1000); //No longer needed
}

</script>

So it would be:

var t=setInterval(showTime,1000);

And to stop it, you can run:

clearInterval(t);

<li><a href="#"><i class="fa fa-clock-o"></i><script>showTime()</script></a></li>

Add onclick="showTime() to the html element you want when clicked, calls the function showTime() .

If you want to show the time after the link is clicked,

<li><a href="#" onclick="showTime()"><i class="fa fa-clock-o"></i>Hours here</a></li>

or if you want to show the time after the icon is clicked,

<li><a href="#"><i class="fa fa-clock-o" onclick="showTime()"></i>Hours here</a></li>

On the javascript side maybe you can do something like this:

document.getElementById("clock").onclick = {
var timeNow = new Date();
var hours   = timeNow.getHours();
var minutes = timeNow.getMinutes();
var seconds = timeNow.getSeconds();
var timeString = "" + ((hours > 24) ? hours - 12 : hours);
timeString  += ((minutes < 10) ? ":0" : ":") + minutes;
timeString  += ((seconds < 10) ? ":0" : ":") + seconds;
timeString  += (hours >= 12) ? " P.M." : " A.M.";
document.htmlClock.timeField.value = timeString;
timerID = setTimeout("showTime()", 1000);
};

Html

<li><a href="#"><i id="clock"></i>Hours here</a></li>

The accepted answer and others are all great. My only suggestion is to modify your original code for the date. As I was looking at it, I noticed some parts could be left out.

Here's the JS from the accepted answer:

function getTime() {
  const timeNow = new Date();
  const hours   = timeNow.getHours();
  const minutes = timeNow.getMinutes();
  const seconds = timeNow.getSeconds();
  let timeString = '' + ((hours > 24) ? hours - 12 : hours);
  timeString  += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString  += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString  += (hours >= 12) ? " P.M." : " A.M.";
  return timeString;
}

const hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();

setInterval(() => {
  hoursSpan.textContent = getTime();
}, 1000);

And here is what I suggest:

function getTime() {
  const timeNow = new Date();
  const hours   = timeNow.getHours();
  const minutes = timeNow.getMinutes();
  const seconds = timeNow.getSeconds();
  // use hours > 12 to generate 12-hour time because hours will never be greater than 24
  let timeString = '' + ((hours > **12**) ? hours - 12 : hours);
  timeString  += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString  += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString  += (hours >= 12) ? " P.M." : " A.M.";
  return timeString;
}

const hoursSpan = document.getElementById('hours');
// can omit this line, since it is handled by the setInterval function
// hoursSpan.textContent = getTime();

setInterval(() => {
  hoursSpan.textContent = getTime();
}, 1000);

The markup is unchanged:

<li>
  <a href="#">
    <i class="fa fa-clock-o"></i><span id="hours"></span>
  </a>
</li>