Question 393229 in Html Question posted in
Some basic documentation can be found here.

Html – Make buttons to switch between 12 and 24 hour time that saves to localstorage

I have a clock in my website, and I would like to add a button or switch into settings that switches the time from 12 hour and 24 hour and vice versa.
My problem is that I have no idea where to connect the setClockStyle in the clock.js

const displayTime = document.querySelector(".display-time");

function showTime() {
  let time = new Date();

  displayTime.innerText = time.toLocaleTimeString("en-US", {
    hour12: true,
    hour: '2-digit',
    minute: '2-digit'
  });

  setTimeout(showTime, 1000);
}

showTime();

function updateDate() {
  let today = new Date();
  let dayName = today.getDay(),
    dayNum = today.getDate();
  const IDCollection = ["daynum"];
  const val = [dayNum];

  for (let i = 0; i < IDCollection.length; i++) {
    document.getElementById(IDCollection[i]).firstChild.nodeValue = val[i];
  }
}

updateDate();

And buttons

<div class="section-title">Clock Style</div>

<div class="buttons">
  <button class="button" onclick="setClockStyle('12')">12hr</button>
  <button class="button" onclick="setClockStyle('24')">24hr</button>
</div>
Tags:

2

Answers


  1. 0

    Use a global variable to hold the flag for 12 or 24-hour time. Then use that in showTime().

    let hour12 = true;

function showTime() {
  let time = new Date();

  displayTime.innerText = time.toLocaleTimeString("en-US", {
    hour12: hour12,
    hour: '2-digit',
    minute: '2-digit'
  });

  setTimeout(showTime, 1000);
}

    Then setClockStyle() can simply set the variable appropriately:

    function setClockStyle(style) {
    hour12 = style == '12';
}
    Login or Signup to reply.
  2. 0

    I made 2 snippets the first is without using setClockStyle function (you don’t really need) and then adding argument ‘format’ in your function (will be either true or false for hour12).

    const displayTime1 = document.querySelector(".display-time-one");




function showTime1(format) {
  let time = new Date();

  displayTime1.innerText = time.toLocaleTimeString("en-US", {
    hour12: format,
    hour: '2-digit',
    minute: '2-digit'
  });

}

showTime1(true);
    <div class="section-title">Clock Style</div>

<div class="display-time-one"></div>

<div class="buttons">
  <button class="button" onclick="showTime1(true)">12hr</button>
  <button class="button" onclick="showTime1(false)">24hr</button>

</div>

    The second one with using setClockStyle that will take the argument as true or false and pass it to showtime function.

    const displayTime2 = document.querySelector(".display-time-two");

function setClockStyle(arg){
    showTime2(arg)
}

function showTime2(format) {
      let time = new Date();
      displayTime2.innerText = time.toLocaleTimeString("en-US", {
      hour12: format,
      hour: '2-digit',
      minute: '2-digit'
    });
  
  }
setClockStyle(true)
    <div class="section-title">Clock Style</div>

<div class="display-time-two"></div>

<div class="buttons">
  <button class="button" onclick="setClockStyle(true)">12hr</button>
  <button class="button" onclick="setClockStyle(false)">24hr</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search