setting through button click is reset to default through setInterval

Question

I am coding a digital clock. The buttons purpose is to hide seconds if the user wants only see the hours and minutes but not the seconds, so the button should be hide the seconds on click. If the button is clicked "secs" will be hide but only until the new interval pass is in turn. I want that the "secs" will even be hided when the next interval pass is in turn until the user want to display the seconds. It is quite though for me to implement this, how can I?

window = onload = function () {
  function displayTime(dataObject) {
    
    const displayDate = document.getElementById('date-elements');
    const displayTime = document.getElementById('time-elements');

    const parts = {
      //date elements:
      weekday: dataObject.getDay(),
      daysNumber: dataObject.getDate(),
      month: dataObject.getMonth() + 1,
      year: dataObject.getFullYear(),
      //time elements:
      hours: dataObject.getHours(),
      minutes: dataObject.getMinutes(),
      seconds: dataObject.getSeconds(),
    };
    
    const formatAMPM = parts.hours >= 12 ? "PM" : "AM";
    const dayState = formatAMPM;
    parts.hours = parts.hours % 12;
    parts.hours ? parts.hours : 12;

    //appending zero if smaller than 10
    dysNmbr = parts.daysNumber < 10 ? "0" + parts.daysNumber : parts.daysNumber;
    mnth = parts.month < 10 ? "0" + parts.month : parts.month;

    hrs = parts.hours < 10 ? "0" + parts.hours : parts.hours;
    mins = parts.minutes < 10 ? "0" + parts.minutes : parts.minutes;
    secs = parts.seconds < 10 ? "0" + parts.seconds : parts.seconds;

    //array of weekdays names
    days = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
    ];

    //determine the weekday
    currentDayName = days[parts.weekday];

    displayDate.innerHTML = `${currentDayName}, ${dysNmbr}.${mnth}.${parts.year}`;
    displayTime.innerHTML = `${hrs} : ${mins} : ${secs} ${dayState}`;

const btn = document.getElementById("btn");
    btn.addEventListener("click", () => {
        displayTime.innerHTML =  `${hrs} : ${mins} ${dayState}`
    })

  }

  let currentDate = new Date();
  let formattedDate = displayTime(currentDate);

  setInterval(() => {
    currentDate = new Date();
    formattedDate = displayTime(currentDate);

    formattedDate;
  }, 10);
};

 <body>
    <div id = "date-elements"></div>
    <div id = "time-elements"></div>
    <button id = "btn">Display seconds</button>
  </body>

score 0 · Answer 1 · answered Sep 07 '22 at 18:02

If I understand correctly, you want to save the fact that the user has pressed the button, and if so, not show the seconds. You can introduce a variable for storing this information and then use it whenever updating what you display:

let showSeconds = true;
...
    displayTime.innerHTML = showSeconds ? `${hrs} : ${mins} : ${secs} ${dayState}` : `${hrs} : ${mins} ${dayState}`;
...
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    displayTime.innerHTML =  `${hrs} : ${mins} ${dayState}`;
    showSeconds = false;
});

whitespace · Answer 2 · 2022-09-07T18:14:04.597

You are replacing the html of displayTime on the button click. The next time your displayTime function is executed, the value is overwritten.

You need to let your displayTime function know that it should change it's output format.

Use a commonly available variable for that. The button will set the variable, displayTime will read it

Other recommendations:

There are time/date formating functions (both native to the Browser, as well as well established packages). This answer gives great examples for date formating: https://stackoverflow.com/a/34015511/2438494

You are adding an event listener every ten milliseconds, because the addEventListener function is called inside displayTime, which runs on a 10 milliseconds interval

I recommand an approach like this (inside your window.onload function):


// global vars
let showSeconds = true;

// fetch elements from dom
const displayDate = document.getElementById('date-elements');
const displayTime = document.getElementById('time-elements');
const btn = document.getElementById("btn");


function formatDate() {
  // your date format function
}

function formatTime() {
  // your time format function making use of the global `showSeconds` variable
}

function update() {
  const currentDate = new Date();
  displayDate.innerHTML = formatDate(currentDate);
  displayTime.innerHTML = format(currentDate);
}

setInterval(() => {
  update();
}, 10);


// add event listerner
btn.addEventListener("click", () => {
  // update variable
  showSeconds = false;
  // force recalculation
  update();
});

setting through button click is reset to default through setInterval

2 Answers2