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 = onl oad = 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>
CodePudding user response:
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;
});
CodePudding user response:
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();
});