Search code examples
javascripthtml

I am trying to convert to a 12 hour format in javascript, but when I use the modulo operator it changes PM back to AM

I can change the time from military time to 12-hour format, but when I use the modulo operator it also changes the time from PM to AM. How do I change to the current time in 12-hour format without altering AM/PM?

var now = new Date()
var h = now.getHours();
h = h % 12;
var m = now.getMinutes();
var s = now.getSeconds();

document.getElementById("hours").innerHTML = h;
document.getElementById("minutes").innerHTML = m;
document.getElementById("seconds").innerHTML = s;


var suffix = "AM";

//set to PM if needed
if (h >= 12) {
  suffix = "PM";
  h = h - 12;
}
//take care of midnight
if (h === 0) {
  h = 12;
}
document.getElementById("ampm").innerHTML = suffix;
<body>
  <main>
    <h1>Digital clock</h1>
    <fieldset>
      <legend>Clock</legend>
      <span id="hours">&nbsp;</span>:
      <span id="minutes">&nbsp;</span>:
      <span id="seconds">&nbsp;</span>&nbsp;
      <span id="ampm">&nbsp;</span>
    </fieldset>
  </main>
</body>

Solution

  • Depending on where you are in the world, you may just be able to get the time format with .toLocaleTimeString():

    var timeEl = document.getElementById("time");

function getTime(){
  timeEl.textContent = new Date().toLocaleTimeString();
  setTimeout(getTime, 20); // Call the function again in 20ms
}

getTime(); // Initiate the clock
    <h1>Digital clock</h1>
<fieldset>
  <legend>Clock</legend>
  <span id="time"></span>
</fieldset>

    But, if you were to need/want to write this out "long-hand", modulo isn't really needed. This is a straight-forward operation.

    • Get the current time.
    • Extract the hours.
    • If hours >= 12, subtract 12 (and set AM/PM to PM)
    • Correct the minutes and seconds for single digit answers.
    • Use .textContent to populate elements, not .innerHTML.

    If you want an actual ticking clock, you'll need a timer to keep running the code over and over:

    var hEl = document.getElementById("hours");
var mEl = document.getElementById("minutes");
var sEl = document.getElementById("seconds");
var amPM = document.getElementById("ampm");

function fixDigit(val){
  // turn a single digit into one with a "0" prepended to it
  return val.toString().length === 1 ? "0" + val : val;
}

function getTime(){
  var time = new Date();
  var h = time.getHours();
  hEl.textContent = (h >= 12) ? h - 12: h;
  mEl.textContent = fixDigit(time.getMinutes());
  sEl.textContent = fixDigit(time.getSeconds());
  amPM.textContent = h < 12 ? "AM" : "PM";
  setTimeout(getTime, 20); // Call the function again in 20ms
}

getTime(); // Initiate the clock
    <h1>Digital clock</h1>
<fieldset>
  <legend>Clock</legend>
    <span id="hours"></span>:
    <span id="minutes"></span>:
    <span id="seconds"></span>
    <span id="ampm"></span>
</fieldset>