I followed a tutorial on YT on how to put a clock, I've copied the exact code (well not exactly because of the "id") mine seems to be not working. this is my code
const hourEl = document.getElementsById ("hour");
const minuteEl = document.getElementById("minutes");
const secondsEl = document.getElementById("seconds");
const ampmEl = document.getElementById("ampm");
function updateClock (){
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
let ampm = "AM";
if(h> 12) {
h = h - 12;
ampm= "PM";
}
h = h > 10 ? "0" + h: h;
m = m > 10 ? "0" + m: m;
s = s > 10 ? "0" + s: s;
hourEl.innerText = h;
minuteEl.innerText = m;
secondsEl.innerText = s;
ampmEl, (innerText= ampm);
setTimeout(()=>{
}, 1000)
}
updateClock();
Mostly you just need to call the function from your timeout, but then you need to flip your > to < in your comparison, and fix a few typos (document.getElementsById, for example, should be document.getElementById):
const hourEl = document.getElementById ("hour");
const minuteEl = document.getElementById("minutes");
const secondsEl = document.getElementById("seconds");
const ampmEl = document.getElementById("ampm");
function updateClock (){
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
let ampm = "AM";
if(h> 12) {
h = h - 12;
ampm= "PM";
}
h = h < 10 ? "0" + h: h;
m = m < 10 ? "0" + m: m;
s = s < 10 ? "0" + s: s;
hourEl.innerText = h;
minuteEl.innerText = m;
secondsEl.innerText = s;
ampmEl, (innerText= ampm);
setTimeout(()=>{
updateClock()
}, 1000)
}
updateClock();
div {
display: inline-block;
}
<div id="hour"></div>:
<div id="minutes"></div>:
<div id="seconds"></div>
<div id="ampm"></div>
Related
I have problem with this clock. At first timer didn't show up so I used defer and it appeared but time is only changing when I refresh website.
I just want to make this timer change itself with the real world time not only when I refresh website.
const hourEl = document.getElementById('hour')
const minEl = document.getElementById('minutes')
const secEl = document.getElementById('seconds')
const ampmEl = document.getElementById('ampm')
function clockUpdate() {
let h = new Date().getHours()
let m = new Date().getMinutes()
let s = new Date().getSeconds()
let ampm = 'AM'
if (h > 12) {
h = h - 12;
ampm = 'PM';
}
hourEl.innerHTML = h;
minEl.innerHTML = m;
secEl.innerHTML = s;
}
clockUpdate();
<span id="hour"></span>:<span id="minutes"></span>:<span id="seconds">:/span> <span id="ampm"></span>
You can use setTimeout(functionRef, delay) for repeat a function after a number of milliseconds and put your function each seconds.
Put your code inside setInterval
const hourEl = document.getElementById('hour')
const minEl = document.getElementById('minutes')
const secEl = document.getElementById('seconds')
const ampmEl = document.getElementById('ampm')
function clockUpdate() {
let h = new Date().getHours()
let m = new Date().getMinutes()
let s = new Date().getSeconds()
let ampm = 'AM'
if (h > 12) {
h = h - 12;
ampm = 'PM';
}
hourEl.innerHTML = h;
minEl.innerHTML = m;
secEl.innerHTML = s;
}
const int = setInterval(clockUpdate, 1000);
<span id="hour"></span>
<span id="minutes"></span>
<span id="seconds"></span>
<span id="ampm"></span>
Just wrap in a setInterval - here I use half a sec since setInterval is not super reliable
I also use textContent and pad the numbers.
You forgot the ampm too
const hourEl = document.getElementById('hour')
const minEl = document.getElementById('minutes')
const secEl = document.getElementById('seconds')
const ampmEl = document.getElementById('ampm')
function clockUpdate() {
let h = new Date().getHours()
let m = new Date().getMinutes()
let s = new Date().getSeconds()
let ampm = 'AM'
if (h > 12) {
h = h - 12;
ampm = 'PM';
}
hourEl.textContent = String(h).padStart(2,"0");
minEl.textContent = String(m).padStart(2,"0");
secEl.textContent = String(s).padStart(2,"0");
ampmEl.textContent= ampm;
}
setInterval(clockUpdate,500);
<span id="hour"></span>:<span id="minutes"></span>:<span id="seconds"></span>:<span id="ampm"></span>
You call the clockUpdate() function only once. Consider moving it into a setInterval()-function that runs every second (or faster for better accuracy)... like so:
setInterval(clockUpdate, 1000);
I'm (very) new to javascript, would appreciate someone explaining how I could fix this.
I have two very similar bits of code for a digital clock - difference is that one is an hour ahead of the other. (var time = h + 1 in one, and var time = h in the other)
When I put both on the same page, only one runs.
First bit of code:
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " WST";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + 1 + ":" + m + "" + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
Second bit of code:
<script>
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " GMT";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + ":" + m + "" + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
The html I use with these is:
<div id="MyClockDisplay” class="clock" onload="showTime()"></div>
🤞 someone can help me - many thanks in advance.
The code itself works fine. You have to be more specific about "what" does not work.
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " WST";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + 1 + ":" + m + "" + session;
console.log(time);
}
function showTime2(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " GMT";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + ":" + m + "" + session;
console.log(time);
}
showTime();
showTime2();
I need more than one clock. In my attempt, I replaced document.getElementById with Document.getElementsByClassName. Unfortunately, it does not work the way I tried. Can someone help me please?
function currentTime() {
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var midday = "AM";
midday = (hour >= 12) ? "PM" : "AM";
hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour);
hour = updateTime(hour);
min = updateTime(min);
let hours = document.createElement('span')
let points = document.createElement('span')
let mins = document.createElement('span')
let blank = document.createElement('span')
let middays = document.createElement('span')
hours.innerHTML = hour
points.innerHTML = ":"
mins.innerHTML = min
blank.innerHTML = " "
middays.innerHTML = midday
document.getElementById("clock").innerHTML = ""
document.getElementById("clock").appendChild(hours);
document.getElementById("clock").appendChild(points);
document.getElementById("clock").appendChild(mins);
document.getElementById("clock").appendChild(blank);
document.getElementById("clock").appendChild(middays);
var t = setTimeout(currentTime, 1000);
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
}
else {
return k;
}
}
currentTime();
<p id="clock"></p>
const clocks = document.querySelectorAll('.clock');
function currentTime() {
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var midday = "AM";
midday = (hour >= 12) ? "PM" : "AM";
hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour);
hour = updateTime(hour);
min = updateTime(min);
const clock = `${hour}:${min} ${midday}`
for (var i = 0; i < clocks.length; i++) {
clocks[i].innerHTML = clock;
}
var t = setTimeout(currentTime, 1000);
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
}
else {
return k;
}
}
currentTime();
<p class="clock"></p>
<p class="clock"></p>
<p class="clock"></p>
Using getElementsByClassName(), if you read the function, elements is plural. The function getElementsByClassName() actually returns an array! So, you just need to use:
document.getElementsByClassName('class')[index].
Hopefully, you understand how arrays work. If not, here is MDN and w3schools. I recommend reading w3schools first then seeing MDN
you can't have multiple id on the same page, so you need to replace that with a class and select all of them with document.querySelectorAll(".class-name") you can then loop over it.
I done this, expect it was about your question ?
function currentTime(elementsClass)
{
let AllClock = document.getElementsByClassName(elementsClass)
, theClock = AllClock[0]
, hours = document.createElement('span')
, points = document.createElement('span')
, mins = document.createElement('span')
, blank = document.createElement('span')
, middays = document.createElement('span')
, date = null
, hour = null
, theClockInnerHTML = ''
;
theClock.appendChild(hours);
theClock.appendChild(points);
theClock.appendChild(mins);
theClock.appendChild(blank);
theClock.appendChild(middays);
points.textContent = ":"
blank.textContent = " "
updateClock()
setInterval(updateClock, 1000);
function updateClock()
{
date = new Date()
hour = date.getHours()
hours.textContent = time2digits( (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour) )
mins.textContent = time2digits( date.getMinutes())
middays.textContent = (hour >= 12) ? "PM" : "AM"
if (theClock.innerHTML!=theClockInnerHTML) {
theClockInnerHTML = theClock.innerHTML
for(let i=1;i<AllClock.length;i++) {
AllClock[i].innerHTML = theClockInnerHTML
}
}
}
function time2digits(k)
{
return (k < 10) ? ("0" + k) : k
}
}
currentTime('clock');
<p class="clock"></p>
<p class="clock"></p>
<p class="clock"></p>
/* Navbar ClockDate */
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
}; // add zero in front of numbers < 10
return i;
}
I use this code for my clock in my live chat, but why does it return the wrong time? Specifically 4 hours earlier.
The code is for making a digital clock, what's the use of putting a setTimeout function in the showTime function and what is the use of setting both the textcontent and Innertext
function showTime(){
var date = new Date();
var h = date.getHours();// 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
<div id="MyClockDisplay" class="clock"></div>
You need to call setTimeout at the bottom of showTime so that each call of showTime will queue up the function to run again in 1 second - which, when run, will queue the function again after another second, and so on. Having a function recursively call itself with setTimeout is an alternative to using setInterval.
textContent is generally preferable over innerText - see The poor, misunderstood innerText, though if you're just assigning rather than getting, it doesn't matter much. innerHTML isn't appropriate here because you're assigning text, not HTML markup.
Using setInterval rather than a recursive setTimeout would look like this, accomplishing the exact same thing:
function showTime() {
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if (h == 0) {
h = 12;
}
if (h > 12) {
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
}
showTime();
setInterval(showTime, 1000);
<div id="MyClockDisplay" class="clock"></div>
The use of the setTimeout is to set next count down for next second.
The use of Innertext is to set the time string to the element .
Innertext and textcontent are the same here.
Maybe you can try SetInterval as below to be more accurate:
function showTime(){
var date = new Date();
var h = date.getHours();// 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
}
showTime();
setInterval(showTime, 1000);