Mixing
onload Javascript clock needs fixing
-1
Javascript clock.
expected result: Display the date and time.
problem: does not display
[The display of the clock/time in the top left][1]
This code should insert the time into the div with ID value of 'time'. There is a setTimeout function which I suspect is not being utilized properly. My problem is the time not showing.
I'm missing something here because the time doesn't show. Please help me fix it.
<script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = newDate();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
var mm = correctDigit(m);
var ss = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+mm+":"+ss+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
var t = setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
}
return i;
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
javascript clock
asked Nov 19 '18 at 20:40
GrayGray
43
|
show 2 more comments
-1
Javascript clock.
expected result: Display the date and time.
problem: does not display
[The display of the clock/time in the top left][1]
This code should insert the time into the div with ID value of 'time'. There is a setTimeout function which I suspect is not being utilized properly. My problem is the time not showing.
I'm missing something here because the time doesn't show. Please help me fix it.
<script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = newDate();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
var mm = correctDigit(m);
var ss = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+mm+":"+ss+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
var t = setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
}
return i;
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
javascript clock
asked Nov 19 '18 at 20:40
GrayGray
43
onload="t"makes no sense...it should be the name of a function, not an out-of-scope variable. tryonload="getTime()"instead
– ADyson
Nov 19 '18 at 20:44
i knw thanks. twas an edit i made. ADyson :)
– Gray
Nov 19 '18 at 20:54
yous seem to have erased all your code...
– ADyson
Nov 19 '18 at 20:55
Is there code to go along with this question?
– AnonymousSB
Nov 19 '18 at 20:57
@AnonymousSB there used to be...check the revision history
– ADyson
Nov 19 '18 at 22:29
|
show 2 more comments
-1
-1
-1
Javascript clock.
expected result: Display the date and time.
problem: does not display
[The display of the clock/time in the top left][1]
This code should insert the time into the div with ID value of 'time'. There is a setTimeout function which I suspect is not being utilized properly. My problem is the time not showing.
I'm missing something here because the time doesn't show. Please help me fix it.
<script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = newDate();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
var mm = correctDigit(m);
var ss = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+mm+":"+ss+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
var t = setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
}
return i;
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
javascript clock
asked Nov 19 '18 at 20:40
GrayGray
43
Javascript clock.
expected result: Display the date and time.
problem: does not display
[The display of the clock/time in the top left][1]
This code should insert the time into the div with ID value of 'time'. There is a setTimeout function which I suspect is not being utilized properly. My problem is the time not showing.
I'm missing something here because the time doesn't show. Please help me fix it.
<script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = newDate();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
var mm = correctDigit(m);
var ss = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+mm+":"+ss+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
var t = setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
}
return i;
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
javascript clock
javascript clock
asked Nov 19 '18 at 20:40
GrayGray
43
asked Nov 19 '18 at 20:40
GrayGray
43
edited Nov 22 '18 at 21:33
Gray
asked Nov 19 '18 at 20:40
GrayGray
43
asked Nov 19 '18 at 20:40
GrayGray
43
asked Nov 19 '18 at 20:40
GrayGray
43
43
onload="t"makes no sense...it should be the name of a function, not an out-of-scope variable. tryonload="getTime()"instead
– ADyson
Nov 19 '18 at 20:44
i knw thanks. twas an edit i made. ADyson :)
– Gray
Nov 19 '18 at 20:54
yous seem to have erased all your code...
– ADyson
Nov 19 '18 at 20:55
Is there code to go along with this question?
– AnonymousSB
Nov 19 '18 at 20:57
@AnonymousSB there used to be...check the revision history
– ADyson
Nov 19 '18 at 22:29
|
show 2 more comments
onload="t"makes no sense...it should be the name of a function, not an out-of-scope variable. tryonload="getTime()"instead
– ADyson
Nov 19 '18 at 20:44
i knw thanks. twas an edit i made. ADyson :)
– Gray
Nov 19 '18 at 20:54
yous seem to have erased all your code...
– ADyson
Nov 19 '18 at 20:55
Is there code to go along with this question?
– AnonymousSB
Nov 19 '18 at 20:57
@AnonymousSB there used to be...check the revision history
– ADyson
Nov 19 '18 at 22:29
onload="t" makes no sense...it should be the name of a function, not an out-of-scope variable. try onload="getTime()" instead– ADyson
Nov 19 '18 at 20:44
onload="t" makes no sense...it should be the name of a function, not an out-of-scope variable. try onload="getTime()" instead– ADyson
Nov 19 '18 at 20:44
i knw thanks. twas an edit i made. ADyson :)
– Gray
Nov 19 '18 at 20:54
i knw thanks. twas an edit i made. ADyson :)
– Gray
Nov 19 '18 at 20:54
yous seem to have erased all your code...
– ADyson
Nov 19 '18 at 20:55
yous seem to have erased all your code...
– ADyson
Nov 19 '18 at 20:55
Is there code to go along with this question?
– AnonymousSB
Nov 19 '18 at 20:57
Is there code to go along with this question?
– AnonymousSB
Nov 19 '18 at 20:57
@AnonymousSB there used to be...check the revision history
– ADyson
Nov 19 '18 at 22:29
@AnonymousSB there used to be...check the revision history
– ADyson
Nov 19 '18 at 22:29
|
show 2 more comments
2 Answers
2
active
oldest
votes
1
I've fixed your immediate problem by
- changing the
body'sonloadattribute to call the function you want to run,getTime()
- putting a space between
newandDateinvar today = newDate().
The calendar is now being added to the DOM and updating every second, but your calendar logic seems still to have some issues. (Hint: it works when the minutes and seconds are less than 10; since this wasn't the main part of your question, I'm leaving it as an exercise for you to fix it yourself -- that's how you learn!)
<script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
m = correctDigit(m);
s = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+m+":"+s+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
return i;
}
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
<div>
<div class="news scroll color-1">
<ul>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 3</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
</ul>
</div>answered Nov 19 '18 at 20:50
nviolinvioli
2,31631228
Thanks nvioli. I was blind to the error of: new Date(); hahaha I'm so green. You're very good. Both of you.
– Gray
Nov 19 '18 at 20:59
Great! If I've fixed your problem please click the check mark to accept my answer (p.s. if you had the console open, or even in the SO snippet view, that error was reported; that's how I found it)
– nvioli
Nov 19 '18 at 21:01
i just realized that I think while you were sending the reply. I need more practice.
– Gray
Nov 19 '18 at 21:03
add a comment |
0
Here's a working working example with some notable differences.
- I put the
setTimeoutoutside thegetTimefunction - I used
setIntervalinstead ofsetTimeout
- I used JavaScript's
String.padStart()to fill in the missing 0
As for setInterval, you can assign that to a variable, and call clearInterval(variableName) if you want to stop the clock. Assigning setTimeout to a variable doesn't do anything for you.
If you want to see a much easier implementation using momentJS, check out the demo at the bottom
var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date(),
h = today.getHours(),
m = today.getMinutes().toString().padStart(2, '0'),
s = today.getSeconds().toString().padStart(2, '0'),
d = dayArray[today.getDay()],
mo = monthArray[today.getMonth()],
y = today.getFullYear();
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${h}:${m}:${s}</h1> ` +
`<span class='dark'>${d},</span> ` +
`<span class='dark'>${mo}</span> ` +
`<span class='dark'>${y}</span>`;
};
setInterval (function() {
getTime();
}, 1000);<div id="time"><div>Bonus (using momentJS)
function getTime() {
var today = moment(),
time = today.format('HH:mm:ss'),
date = today.format('dddd, MMMM, YYYY');
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${time}</h1>` +
`<span class='dark'>${date}</span>`
};
setInterval (function() {
getTime();
}, 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="time"></div>answered Nov 19 '18 at 22:56
AnonymousSBAnonymousSB
2,194221
This is an improvement.Thank you AnonymousSB.
– Gray
Nov 22 '18 at 21:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382321%2fonload-javascript-clock-needs-fixing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I've fixed your immediate problem by
- changing the
body'sonloadattribute to call the function you want to run,getTime()
- putting a space between
newandDateinvar today = newDate().
The calendar is now being added to the DOM and updating every second, but your calendar logic seems still to have some issues. (Hint: it works when the minutes and seconds are less than 10; since this wasn't the main part of your question, I'm leaving it as an exercise for you to fix it yourself -- that's how you learn!)
<script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
m = correctDigit(m);
s = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+m+":"+s+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
return i;
}
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
<div>
<div class="news scroll color-1">
<ul>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 3</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
</ul>
</div>answered Nov 19 '18 at 20:50
nviolinvioli
2,31631228
Thanks nvioli. I was blind to the error of: new Date(); hahaha I'm so green. You're very good. Both of you.
– Gray
Nov 19 '18 at 20:59
Great! If I've fixed your problem please click the check mark to accept my answer (p.s. if you had the console open, or even in the SO snippet view, that error was reported; that's how I found it)
– nvioli
Nov 19 '18 at 21:01
i just realized that I think while you were sending the reply. I need more practice.
– Gray
Nov 19 '18 at 21:03
add a comment |
1
I've fixed your immediate problem by
- changing the
body'sonloadattribute to call the function you want to run,getTime()
- putting a space between
newandDateinvar today = newDate().
The calendar is now being added to the DOM and updating every second, but your calendar logic seems still to have some issues. (Hint: it works when the minutes and seconds are less than 10; since this wasn't the main part of your question, I'm leaving it as an exercise for you to fix it yourself -- that's how you learn!)
<script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
m = correctDigit(m);
s = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+m+":"+s+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
return i;
}
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
<div>
<div class="news scroll color-1">
<ul>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 3</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
</ul>
</div>answered Nov 19 '18 at 20:50
nviolinvioli
2,31631228
Thanks nvioli. I was blind to the error of: new Date(); hahaha I'm so green. You're very good. Both of you.
– Gray
Nov 19 '18 at 20:59
Great! If I've fixed your problem please click the check mark to accept my answer (p.s. if you had the console open, or even in the SO snippet view, that error was reported; that's how I found it)
– nvioli
Nov 19 '18 at 21:01
i just realized that I think while you were sending the reply. I need more practice.
– Gray
Nov 19 '18 at 21:03
add a comment |
1
1
1
I've fixed your immediate problem by
- changing the
body'sonloadattribute to call the function you want to run,getTime()
- putting a space between
newandDateinvar today = newDate().
The calendar is now being added to the DOM and updating every second, but your calendar logic seems still to have some issues. (Hint: it works when the minutes and seconds are less than 10; since this wasn't the main part of your question, I'm leaving it as an exercise for you to fix it yourself -- that's how you learn!)
<script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
m = correctDigit(m);
s = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+m+":"+s+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
return i;
}
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
<div>
<div class="news scroll color-1">
<ul>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 3</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
</ul>
</div>answered Nov 19 '18 at 20:50
nviolinvioli
2,31631228
I've fixed your immediate problem by
- changing the
body'sonloadattribute to call the function you want to run,getTime()
- putting a space between
newandDateinvar today = newDate().
The calendar is now being added to the DOM and updating every second, but your calendar logic seems still to have some issues. (Hint: it works when the minutes and seconds are less than 10; since this wasn't the main part of your question, I'm leaving it as an exercise for you to fix it yourself -- that's how you learn!)
<script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
m = correctDigit(m);
s = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+m+":"+s+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
return i;
}
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
<div>
<div class="news scroll color-1">
<ul>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 3</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
</ul>
</div><script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
m = correctDigit(m);
s = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+m+":"+s+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
return i;
}
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
<div>
<div class="news scroll color-1">
<ul>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 3</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
</ul>
</div><script>
var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = dayArray[today.getDay()];
var mo = monthArray[today.getMonth()];
var y = today.getFullYear();
m = correctDigit(m);
s = correctDigit(s);
document.getElementById('time')
.innerHTML = "<br><h1 class='large'>"+h+":"+m+":"+s+"</h1> <span class='dark'>"+d+",</span> <span class='dark'>"+mo+"</span> <span class='dark'>"+y+"</span>";
setTimeout (function() {
getTime();
}, 1000);
function correctDigit(i){
if(i < 10){
i = "0" + i;
return i;
}
};
};
</script>
</head>
<body onload="getTime()" class="color-4">
<section>
<div class='time color-0' id="time"></div>
<div>
<div class="news scroll color-1">
<ul>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 3</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
<li class="ellipsis"><h4 class="dark"><i class="fa fa-newspaper-o"></i> Title 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
</ul>
</div>answered Nov 19 '18 at 20:50
nviolinvioli
2,31631228
answered Nov 19 '18 at 20:50
nviolinvioli
2,31631228
answered Nov 19 '18 at 20:50
nviolinvioli
2,31631228
answered Nov 19 '18 at 20:50
nviolinvioli
2,31631228
2,31631228
Thanks nvioli. I was blind to the error of: new Date(); hahaha I'm so green. You're very good. Both of you.
– Gray
Nov 19 '18 at 20:59
Great! If I've fixed your problem please click the check mark to accept my answer (p.s. if you had the console open, or even in the SO snippet view, that error was reported; that's how I found it)
– nvioli
Nov 19 '18 at 21:01
i just realized that I think while you were sending the reply. I need more practice.
– Gray
Nov 19 '18 at 21:03
add a comment |
Thanks nvioli. I was blind to the error of: new Date(); hahaha I'm so green. You're very good. Both of you.
– Gray
Nov 19 '18 at 20:59
Great! If I've fixed your problem please click the check mark to accept my answer (p.s. if you had the console open, or even in the SO snippet view, that error was reported; that's how I found it)
– nvioli
Nov 19 '18 at 21:01
i just realized that I think while you were sending the reply. I need more practice.
– Gray
Nov 19 '18 at 21:03
Thanks nvioli. I was blind to the error of: new Date(); hahaha I'm so green. You're very good. Both of you.
– Gray
Nov 19 '18 at 20:59
Thanks nvioli. I was blind to the error of: new Date(); hahaha I'm so green. You're very good. Both of you.
– Gray
Nov 19 '18 at 20:59
Great! If I've fixed your problem please click the check mark to accept my answer (p.s. if you had the console open, or even in the SO snippet view, that error was reported; that's how I found it)
– nvioli
Nov 19 '18 at 21:01
Great! If I've fixed your problem please click the check mark to accept my answer (p.s. if you had the console open, or even in the SO snippet view, that error was reported; that's how I found it)
– nvioli
Nov 19 '18 at 21:01
i just realized that I think while you were sending the reply. I need more practice.
– Gray
Nov 19 '18 at 21:03
i just realized that I think while you were sending the reply. I need more practice.
– Gray
Nov 19 '18 at 21:03
add a comment |
0
Here's a working working example with some notable differences.
- I put the
setTimeoutoutside thegetTimefunction - I used
setIntervalinstead ofsetTimeout
- I used JavaScript's
String.padStart()to fill in the missing 0
As for setInterval, you can assign that to a variable, and call clearInterval(variableName) if you want to stop the clock. Assigning setTimeout to a variable doesn't do anything for you.
If you want to see a much easier implementation using momentJS, check out the demo at the bottom
var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date(),
h = today.getHours(),
m = today.getMinutes().toString().padStart(2, '0'),
s = today.getSeconds().toString().padStart(2, '0'),
d = dayArray[today.getDay()],
mo = monthArray[today.getMonth()],
y = today.getFullYear();
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${h}:${m}:${s}</h1> ` +
`<span class='dark'>${d},</span> ` +
`<span class='dark'>${mo}</span> ` +
`<span class='dark'>${y}</span>`;
};
setInterval (function() {
getTime();
}, 1000);<div id="time"><div>Bonus (using momentJS)
function getTime() {
var today = moment(),
time = today.format('HH:mm:ss'),
date = today.format('dddd, MMMM, YYYY');
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${time}</h1>` +
`<span class='dark'>${date}</span>`
};
setInterval (function() {
getTime();
}, 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="time"></div>answered Nov 19 '18 at 22:56
AnonymousSBAnonymousSB
2,194221
This is an improvement.Thank you AnonymousSB.
– Gray
Nov 22 '18 at 21:39
add a comment |
0
Here's a working working example with some notable differences.
- I put the
setTimeoutoutside thegetTimefunction - I used
setIntervalinstead ofsetTimeout
- I used JavaScript's
String.padStart()to fill in the missing 0
As for setInterval, you can assign that to a variable, and call clearInterval(variableName) if you want to stop the clock. Assigning setTimeout to a variable doesn't do anything for you.
If you want to see a much easier implementation using momentJS, check out the demo at the bottom
var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date(),
h = today.getHours(),
m = today.getMinutes().toString().padStart(2, '0'),
s = today.getSeconds().toString().padStart(2, '0'),
d = dayArray[today.getDay()],
mo = monthArray[today.getMonth()],
y = today.getFullYear();
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${h}:${m}:${s}</h1> ` +
`<span class='dark'>${d},</span> ` +
`<span class='dark'>${mo}</span> ` +
`<span class='dark'>${y}</span>`;
};
setInterval (function() {
getTime();
}, 1000);<div id="time"><div>Bonus (using momentJS)
function getTime() {
var today = moment(),
time = today.format('HH:mm:ss'),
date = today.format('dddd, MMMM, YYYY');
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${time}</h1>` +
`<span class='dark'>${date}</span>`
};
setInterval (function() {
getTime();
}, 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="time"></div>answered Nov 19 '18 at 22:56
AnonymousSBAnonymousSB
2,194221
This is an improvement.Thank you AnonymousSB.
– Gray
Nov 22 '18 at 21:39
add a comment |
0
0
0
Here's a working working example with some notable differences.
- I put the
setTimeoutoutside thegetTimefunction - I used
setIntervalinstead ofsetTimeout
- I used JavaScript's
String.padStart()to fill in the missing 0
As for setInterval, you can assign that to a variable, and call clearInterval(variableName) if you want to stop the clock. Assigning setTimeout to a variable doesn't do anything for you.
If you want to see a much easier implementation using momentJS, check out the demo at the bottom
var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date(),
h = today.getHours(),
m = today.getMinutes().toString().padStart(2, '0'),
s = today.getSeconds().toString().padStart(2, '0'),
d = dayArray[today.getDay()],
mo = monthArray[today.getMonth()],
y = today.getFullYear();
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${h}:${m}:${s}</h1> ` +
`<span class='dark'>${d},</span> ` +
`<span class='dark'>${mo}</span> ` +
`<span class='dark'>${y}</span>`;
};
setInterval (function() {
getTime();
}, 1000);<div id="time"><div>Bonus (using momentJS)
function getTime() {
var today = moment(),
time = today.format('HH:mm:ss'),
date = today.format('dddd, MMMM, YYYY');
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${time}</h1>` +
`<span class='dark'>${date}</span>`
};
setInterval (function() {
getTime();
}, 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="time"></div>answered Nov 19 '18 at 22:56
AnonymousSBAnonymousSB
2,194221
Here's a working working example with some notable differences.
- I put the
setTimeoutoutside thegetTimefunction - I used
setIntervalinstead ofsetTimeout
- I used JavaScript's
String.padStart()to fill in the missing 0
As for setInterval, you can assign that to a variable, and call clearInterval(variableName) if you want to stop the clock. Assigning setTimeout to a variable doesn't do anything for you.
If you want to see a much easier implementation using momentJS, check out the demo at the bottom
var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date(),
h = today.getHours(),
m = today.getMinutes().toString().padStart(2, '0'),
s = today.getSeconds().toString().padStart(2, '0'),
d = dayArray[today.getDay()],
mo = monthArray[today.getMonth()],
y = today.getFullYear();
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${h}:${m}:${s}</h1> ` +
`<span class='dark'>${d},</span> ` +
`<span class='dark'>${mo}</span> ` +
`<span class='dark'>${y}</span>`;
};
setInterval (function() {
getTime();
}, 1000);<div id="time"><div>Bonus (using momentJS)
function getTime() {
var today = moment(),
time = today.format('HH:mm:ss'),
date = today.format('dddd, MMMM, YYYY');
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${time}</h1>` +
`<span class='dark'>${date}</span>`
};
setInterval (function() {
getTime();
}, 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="time"></div>var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date(),
h = today.getHours(),
m = today.getMinutes().toString().padStart(2, '0'),
s = today.getSeconds().toString().padStart(2, '0'),
d = dayArray[today.getDay()],
mo = monthArray[today.getMonth()],
y = today.getFullYear();
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${h}:${m}:${s}</h1> ` +
`<span class='dark'>${d},</span> ` +
`<span class='dark'>${mo}</span> ` +
`<span class='dark'>${y}</span>`;
};
setInterval (function() {
getTime();
}, 1000);<div id="time"><div>var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getTime() {
var today = new Date(),
h = today.getHours(),
m = today.getMinutes().toString().padStart(2, '0'),
s = today.getSeconds().toString().padStart(2, '0'),
d = dayArray[today.getDay()],
mo = monthArray[today.getMonth()],
y = today.getFullYear();
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${h}:${m}:${s}</h1> ` +
`<span class='dark'>${d},</span> ` +
`<span class='dark'>${mo}</span> ` +
`<span class='dark'>${y}</span>`;
};
setInterval (function() {
getTime();
}, 1000);<div id="time"><div>function getTime() {
var today = moment(),
time = today.format('HH:mm:ss'),
date = today.format('dddd, MMMM, YYYY');
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${time}</h1>` +
`<span class='dark'>${date}</span>`
};
setInterval (function() {
getTime();
}, 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="time"></div>function getTime() {
var today = moment(),
time = today.format('HH:mm:ss'),
date = today.format('dddd, MMMM, YYYY');
document.getElementById('time').innerHTML =
`<br>` +
`<h1 class='large'>${time}</h1>` +
`<span class='dark'>${date}</span>`
};
setInterval (function() {
getTime();
}, 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="time"></div>answered Nov 19 '18 at 22:56
AnonymousSBAnonymousSB
2,194221
edited Nov 19 '18 at 23:10
answered Nov 19 '18 at 22:56
AnonymousSBAnonymousSB
2,194221
answered Nov 19 '18 at 22:56
AnonymousSBAnonymousSB
2,194221
answered Nov 19 '18 at 22:56
AnonymousSBAnonymousSB
2,194221
2,194221
This is an improvement.Thank you AnonymousSB.
– Gray
Nov 22 '18 at 21:39
add a comment |
This is an improvement.Thank you AnonymousSB.
– Gray
Nov 22 '18 at 21:39
This is an improvement.Thank you AnonymousSB.
– Gray
Nov 22 '18 at 21:39
This is an improvement.Thank you AnonymousSB.
– Gray
Nov 22 '18 at 21:39
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382321%2fonload-javascript-clock-needs-fixing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
onload="t"makes no sense...it should be the name of a function, not an out-of-scope variable. tryonload="getTime()"instead– ADyson
Nov 19 '18 at 20:44
i knw thanks. twas an edit i made. ADyson :)
– Gray
Nov 19 '18 at 20:54
yous seem to have erased all your code...
– ADyson
Nov 19 '18 at 20:55
Is there code to go along with this question?
– AnonymousSB
Nov 19 '18 at 20:57
@AnonymousSB there used to be...check the revision history
– ADyson
Nov 19 '18 at 22:29