Fault with adding numbers in javascript
0
Good Evening from sweden!!
I need some help with my countdown code.
In the last part of the code I have added a part that will add a 0 before the last number if it is between 0 and 9 to always keep it six digits long, why isnt it working?
Hope to be hearing from you guys soon since this have to be done before the day is over
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text align: center;
font-size:9px;
</style>
</head>
<body>
<p id="date"></p>
<script>
// Countdown to
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = days + " " + hours + " "
+ minutes;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
// If the number of minutes left is between 0 and 9 add a 0 before it
if (minutes < 10 && minutes < 0)
document.getElementById("date").innerHTML = days + " " + hours + " 0"
+ minutes;
, 1000);
</script>
</body>
</html>
javascript
asked Nov 13 '18 at 16:06
Albin KarlssonAlbin Karlsson
74
|
show 5 more comments
0
Good Evening from sweden!!
I need some help with my countdown code.
In the last part of the code I have added a part that will add a 0 before the last number if it is between 0 and 9 to always keep it six digits long, why isnt it working?
Hope to be hearing from you guys soon since this have to be done before the day is over
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text align: center;
font-size:9px;
</style>
</head>
<body>
<p id="date"></p>
<script>
// Countdown to
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = days + " " + hours + " "
+ minutes;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
// If the number of minutes left is between 0 and 9 add a 0 before it
if (minutes < 10 && minutes < 0)
document.getElementById("date").innerHTML = days + " " + hours + " 0"
+ minutes;
, 1000);
</script>
</body>
</html>
javascript
asked Nov 13 '18 at 16:06
Albin KarlssonAlbin Karlsson
74
4
Are you sure you wantminutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybeminutes < 10 && minutes > 0
– wowserx
Nov 13 '18 at 16:08
Also, you're missing a closing}for theif (distance < 0)
– Oram
Nov 13 '18 at 16:09
@Oram no he's not, it's just poorly indented
– Patrick Roberts
Nov 13 '18 at 16:11
You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9
– Zohir Salak
Nov 13 '18 at 16:11
How do I do that? pretty new to this, Zohir?
– Albin Karlsson
Nov 13 '18 at 16:15
|
show 5 more comments
0
0
0
Good Evening from sweden!!
I need some help with my countdown code.
In the last part of the code I have added a part that will add a 0 before the last number if it is between 0 and 9 to always keep it six digits long, why isnt it working?
Hope to be hearing from you guys soon since this have to be done before the day is over
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text align: center;
font-size:9px;
</style>
</head>
<body>
<p id="date"></p>
<script>
// Countdown to
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = days + " " + hours + " "
+ minutes;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
// If the number of minutes left is between 0 and 9 add a 0 before it
if (minutes < 10 && minutes < 0)
document.getElementById("date").innerHTML = days + " " + hours + " 0"
+ minutes;
, 1000);
</script>
</body>
</html>
javascript
asked Nov 13 '18 at 16:06
Albin KarlssonAlbin Karlsson
74
Good Evening from sweden!!
I need some help with my countdown code.
In the last part of the code I have added a part that will add a 0 before the last number if it is between 0 and 9 to always keep it six digits long, why isnt it working?
Hope to be hearing from you guys soon since this have to be done before the day is over
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text align: center;
font-size:9px;
</style>
</head>
<body>
<p id="date"></p>
<script>
// Countdown to
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = days + " " + hours + " "
+ minutes;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
// If the number of minutes left is between 0 and 9 add a 0 before it
if (minutes < 10 && minutes < 0)
document.getElementById("date").innerHTML = days + " " + hours + " 0"
+ minutes;
, 1000);
</script>
</body>
</html>
javascript
javascript
asked Nov 13 '18 at 16:06
Albin KarlssonAlbin Karlsson
74
asked Nov 13 '18 at 16:06
Albin KarlssonAlbin Karlsson
74
asked Nov 13 '18 at 16:06
Albin KarlssonAlbin Karlsson
74
asked Nov 13 '18 at 16:06
Albin KarlssonAlbin Karlsson
74
asked Nov 13 '18 at 16:06
Albin KarlssonAlbin Karlsson
74
74
4
Are you sure you wantminutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybeminutes < 10 && minutes > 0
– wowserx
Nov 13 '18 at 16:08
Also, you're missing a closing}for theif (distance < 0)
– Oram
Nov 13 '18 at 16:09
@Oram no he's not, it's just poorly indented
– Patrick Roberts
Nov 13 '18 at 16:11
You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9
– Zohir Salak
Nov 13 '18 at 16:11
How do I do that? pretty new to this, Zohir?
– Albin Karlsson
Nov 13 '18 at 16:15
|
show 5 more comments
4
Are you sure you wantminutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybeminutes < 10 && minutes > 0
– wowserx
Nov 13 '18 at 16:08
Also, you're missing a closing}for theif (distance < 0)
– Oram
Nov 13 '18 at 16:09
@Oram no he's not, it's just poorly indented
– Patrick Roberts
Nov 13 '18 at 16:11
You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9
– Zohir Salak
Nov 13 '18 at 16:11
How do I do that? pretty new to this, Zohir?
– Albin Karlsson
Nov 13 '18 at 16:15
4
4
Are you sure you want
minutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybe minutes < 10 && minutes > 0– wowserx
Nov 13 '18 at 16:08
Are you sure you want
minutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybe minutes < 10 && minutes > 0– wowserx
Nov 13 '18 at 16:08
Also, you're missing a closing
} for the if (distance < 0)– Oram
Nov 13 '18 at 16:09
Also, you're missing a closing
} for the if (distance < 0)– Oram
Nov 13 '18 at 16:09
@Oram no he's not, it's just poorly indented
– Patrick Roberts
Nov 13 '18 at 16:11
@Oram no he's not, it's just poorly indented
– Patrick Roberts
Nov 13 '18 at 16:11
You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9
– Zohir Salak
Nov 13 '18 at 16:11
You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9
– Zohir Salak
Nov 13 '18 at 16:11
How do I do that? pretty new to this, Zohir?
– Albin Karlsson
Nov 13 '18 at 16:15
How do I do that? pretty new to this, Zohir?
– Albin Karlsson
Nov 13 '18 at 16:15
|
show 5 more comments
3 Answers
3
active
oldest
votes
0
If you not familiar with ternary operator i'ts just an if statement in one line.
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
var x = setInterval(function()
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// after the calculation we reassigning to the variables
// hours < 10 ? : means if hours is less than 10
// if so assing "0" + hours to variable hours
// : is basically the else and then we just keep as it is
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
document.getElementById("date").innerHTML = days + ":" + hours + ":" +
minutes + ":" + seconds;
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
,
1000);#date
font-size: 4em;
<p id="date"></p>answered Nov 13 '18 at 16:28
Zohir SalakZohir Salak
2,5031414
When I add that instead of the code I have now nothing at all appears on the screen for some reason?
– Albin Karlsson
Nov 13 '18 at 16:33
Since it Works in snippet here, you're probably doing something wrong.
– Zohir Salak
Nov 13 '18 at 16:36
Yup, just figured it out :)
– Albin Karlsson
Nov 13 '18 at 16:39
add a comment |
0
There's some formatting issues below your "output the result in an element comment with id date" section. The following should give you what you'd expect.
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
// If the number of days left is between 0 and 9 add a 0 before it
if (days < 10 && days >= 0)
document.getElementById("date").innerHTML = "0" + days + " " + hours + " "
+ minutes;
// If the number of hours left is between 0 and 9 add a 0 before it
if (hours < 10 && hours >= 0)
document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "
+ minutes;
// If the number of minutes left is between 0 and 9 add a 0 before it
if (minutes < 10 && minutes >= 0)
document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"
+ minutes;
answered Nov 13 '18 at 16:46
TLneonTLneon
11
add a comment |
0
To avoid doing multiple DOM manipulations and unneeded calculations, first check if the timer has expired. Only then, if needed construct the timer string.
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
else
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// If the number left is between 0 and 9 add a 0 before it
var daysStr = days < 10 ? "0" + days : days;
var hoursStr = hours < 10 ? "0" + hours : hours;
var minutesStr = minutes < 10 ? "0" + minutes : minutes;
var secondsStr = seconds < 10 ? "0" + seconds : seconds;
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;
, 1000);@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text-align: center;
font-size: 9px;
<p id="date"></p>answered Nov 13 '18 at 16:21
OramOram
723217
minutes > 0is not needed, there's no negative values in minutes
– Zohir Salak
Nov 13 '18 at 16:26
I updated the answer.
– Oram
Nov 13 '18 at 16:27
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%2f53284996%2ffault-with-adding-numbers-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
If you not familiar with ternary operator i'ts just an if statement in one line.
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
var x = setInterval(function()
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// after the calculation we reassigning to the variables
// hours < 10 ? : means if hours is less than 10
// if so assing "0" + hours to variable hours
// : is basically the else and then we just keep as it is
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
document.getElementById("date").innerHTML = days + ":" + hours + ":" +
minutes + ":" + seconds;
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
,
1000);#date
font-size: 4em;
<p id="date"></p>answered Nov 13 '18 at 16:28
Zohir SalakZohir Salak
2,5031414
When I add that instead of the code I have now nothing at all appears on the screen for some reason?
– Albin Karlsson
Nov 13 '18 at 16:33
Since it Works in snippet here, you're probably doing something wrong.
– Zohir Salak
Nov 13 '18 at 16:36
Yup, just figured it out :)
– Albin Karlsson
Nov 13 '18 at 16:39
add a comment |
0
If you not familiar with ternary operator i'ts just an if statement in one line.
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
var x = setInterval(function()
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// after the calculation we reassigning to the variables
// hours < 10 ? : means if hours is less than 10
// if so assing "0" + hours to variable hours
// : is basically the else and then we just keep as it is
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
document.getElementById("date").innerHTML = days + ":" + hours + ":" +
minutes + ":" + seconds;
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
,
1000);#date
font-size: 4em;
<p id="date"></p>answered Nov 13 '18 at 16:28
Zohir SalakZohir Salak
2,5031414
When I add that instead of the code I have now nothing at all appears on the screen for some reason?
– Albin Karlsson
Nov 13 '18 at 16:33
Since it Works in snippet here, you're probably doing something wrong.
– Zohir Salak
Nov 13 '18 at 16:36
Yup, just figured it out :)
– Albin Karlsson
Nov 13 '18 at 16:39
add a comment |
0
0
0
If you not familiar with ternary operator i'ts just an if statement in one line.
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
var x = setInterval(function()
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// after the calculation we reassigning to the variables
// hours < 10 ? : means if hours is less than 10
// if so assing "0" + hours to variable hours
// : is basically the else and then we just keep as it is
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
document.getElementById("date").innerHTML = days + ":" + hours + ":" +
minutes + ":" + seconds;
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
,
1000);#date
font-size: 4em;
<p id="date"></p>answered Nov 13 '18 at 16:28
Zohir SalakZohir Salak
2,5031414
If you not familiar with ternary operator i'ts just an if statement in one line.
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
var x = setInterval(function()
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// after the calculation we reassigning to the variables
// hours < 10 ? : means if hours is less than 10
// if so assing "0" + hours to variable hours
// : is basically the else and then we just keep as it is
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
document.getElementById("date").innerHTML = days + ":" + hours + ":" +
minutes + ":" + seconds;
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
,
1000);#date
font-size: 4em;
<p id="date"></p>var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
var x = setInterval(function()
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// after the calculation we reassigning to the variables
// hours < 10 ? : means if hours is less than 10
// if so assing "0" + hours to variable hours
// : is basically the else and then we just keep as it is
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
document.getElementById("date").innerHTML = days + ":" + hours + ":" +
minutes + ":" + seconds;
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
,
1000);#date
font-size: 4em;
<p id="date"></p>var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
var x = setInterval(function()
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// after the calculation we reassigning to the variables
// hours < 10 ? : means if hours is less than 10
// if so assing "0" + hours to variable hours
// : is basically the else and then we just keep as it is
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
document.getElementById("date").innerHTML = days + ":" + hours + ":" +
minutes + ":" + seconds;
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
,
1000);#date
font-size: 4em;
<p id="date"></p>answered Nov 13 '18 at 16:28
Zohir SalakZohir Salak
2,5031414
edited Nov 13 '18 at 16:35
answered Nov 13 '18 at 16:28
Zohir SalakZohir Salak
2,5031414
answered Nov 13 '18 at 16:28
Zohir SalakZohir Salak
2,5031414
answered Nov 13 '18 at 16:28
Zohir SalakZohir Salak
2,5031414
2,5031414
When I add that instead of the code I have now nothing at all appears on the screen for some reason?
– Albin Karlsson
Nov 13 '18 at 16:33
Since it Works in snippet here, you're probably doing something wrong.
– Zohir Salak
Nov 13 '18 at 16:36
Yup, just figured it out :)
– Albin Karlsson
Nov 13 '18 at 16:39
add a comment |
When I add that instead of the code I have now nothing at all appears on the screen for some reason?
– Albin Karlsson
Nov 13 '18 at 16:33
Since it Works in snippet here, you're probably doing something wrong.
– Zohir Salak
Nov 13 '18 at 16:36
Yup, just figured it out :)
– Albin Karlsson
Nov 13 '18 at 16:39
When I add that instead of the code I have now nothing at all appears on the screen for some reason?
– Albin Karlsson
Nov 13 '18 at 16:33
When I add that instead of the code I have now nothing at all appears on the screen for some reason?
– Albin Karlsson
Nov 13 '18 at 16:33
Since it Works in snippet here, you're probably doing something wrong.
– Zohir Salak
Nov 13 '18 at 16:36
Since it Works in snippet here, you're probably doing something wrong.
– Zohir Salak
Nov 13 '18 at 16:36
Yup, just figured it out :)
– Albin Karlsson
Nov 13 '18 at 16:39
Yup, just figured it out :)
– Albin Karlsson
Nov 13 '18 at 16:39
add a comment |
0
There's some formatting issues below your "output the result in an element comment with id date" section. The following should give you what you'd expect.
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
// If the number of days left is between 0 and 9 add a 0 before it
if (days < 10 && days >= 0)
document.getElementById("date").innerHTML = "0" + days + " " + hours + " "
+ minutes;
// If the number of hours left is between 0 and 9 add a 0 before it
if (hours < 10 && hours >= 0)
document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "
+ minutes;
// If the number of minutes left is between 0 and 9 add a 0 before it
if (minutes < 10 && minutes >= 0)
document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"
+ minutes;
answered Nov 13 '18 at 16:46
TLneonTLneon
11
add a comment |
0
There's some formatting issues below your "output the result in an element comment with id date" section. The following should give you what you'd expect.
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
// If the number of days left is between 0 and 9 add a 0 before it
if (days < 10 && days >= 0)
document.getElementById("date").innerHTML = "0" + days + " " + hours + " "
+ minutes;
// If the number of hours left is between 0 and 9 add a 0 before it
if (hours < 10 && hours >= 0)
document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "
+ minutes;
// If the number of minutes left is between 0 and 9 add a 0 before it
if (minutes < 10 && minutes >= 0)
document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"
+ minutes;
answered Nov 13 '18 at 16:46
TLneonTLneon
11
add a comment |
0
0
0
There's some formatting issues below your "output the result in an element comment with id date" section. The following should give you what you'd expect.
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
// If the number of days left is between 0 and 9 add a 0 before it
if (days < 10 && days >= 0)
document.getElementById("date").innerHTML = "0" + days + " " + hours + " "
+ minutes;
// If the number of hours left is between 0 and 9 add a 0 before it
if (hours < 10 && hours >= 0)
document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "
+ minutes;
// If the number of minutes left is between 0 and 9 add a 0 before it
if (minutes < 10 && minutes >= 0)
document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"
+ minutes;
answered Nov 13 '18 at 16:46
TLneonTLneon
11
There's some formatting issues below your "output the result in an element comment with id date" section. The following should give you what you'd expect.
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
// If the number of days left is between 0 and 9 add a 0 before it
if (days < 10 && days >= 0)
document.getElementById("date").innerHTML = "0" + days + " " + hours + " "
+ minutes;
// If the number of hours left is between 0 and 9 add a 0 before it
if (hours < 10 && hours >= 0)
document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "
+ minutes;
// If the number of minutes left is between 0 and 9 add a 0 before it
if (minutes < 10 && minutes >= 0)
document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"
+ minutes;
answered Nov 13 '18 at 16:46
TLneonTLneon
11
answered Nov 13 '18 at 16:46
TLneonTLneon
11
answered Nov 13 '18 at 16:46
TLneonTLneon
11
answered Nov 13 '18 at 16:46
TLneonTLneon
11
11
add a comment |
add a comment |
0
To avoid doing multiple DOM manipulations and unneeded calculations, first check if the timer has expired. Only then, if needed construct the timer string.
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
else
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// If the number left is between 0 and 9 add a 0 before it
var daysStr = days < 10 ? "0" + days : days;
var hoursStr = hours < 10 ? "0" + hours : hours;
var minutesStr = minutes < 10 ? "0" + minutes : minutes;
var secondsStr = seconds < 10 ? "0" + seconds : seconds;
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;
, 1000);@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text-align: center;
font-size: 9px;
<p id="date"></p>answered Nov 13 '18 at 16:21
OramOram
723217
minutes > 0is not needed, there's no negative values in minutes
– Zohir Salak
Nov 13 '18 at 16:26
I updated the answer.
– Oram
Nov 13 '18 at 16:27
add a comment |
0
To avoid doing multiple DOM manipulations and unneeded calculations, first check if the timer has expired. Only then, if needed construct the timer string.
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
else
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// If the number left is between 0 and 9 add a 0 before it
var daysStr = days < 10 ? "0" + days : days;
var hoursStr = hours < 10 ? "0" + hours : hours;
var minutesStr = minutes < 10 ? "0" + minutes : minutes;
var secondsStr = seconds < 10 ? "0" + seconds : seconds;
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;
, 1000);@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text-align: center;
font-size: 9px;
<p id="date"></p>answered Nov 13 '18 at 16:21
OramOram
723217
minutes > 0is not needed, there's no negative values in minutes
– Zohir Salak
Nov 13 '18 at 16:26
I updated the answer.
– Oram
Nov 13 '18 at 16:27
add a comment |
0
0
0
To avoid doing multiple DOM manipulations and unneeded calculations, first check if the timer has expired. Only then, if needed construct the timer string.
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
else
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// If the number left is between 0 and 9 add a 0 before it
var daysStr = days < 10 ? "0" + days : days;
var hoursStr = hours < 10 ? "0" + hours : hours;
var minutesStr = minutes < 10 ? "0" + minutes : minutes;
var secondsStr = seconds < 10 ? "0" + seconds : seconds;
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;
, 1000);@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text-align: center;
font-size: 9px;
<p id="date"></p>answered Nov 13 '18 at 16:21
OramOram
723217
To avoid doing multiple DOM manipulations and unneeded calculations, first check if the timer has expired. Only then, if needed construct the timer string.
var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
else
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// If the number left is between 0 and 9 add a 0 before it
var daysStr = days < 10 ? "0" + days : days;
var hoursStr = hours < 10 ? "0" + hours : hours;
var minutesStr = minutes < 10 ? "0" + minutes : minutes;
var secondsStr = seconds < 10 ? "0" + seconds : seconds;
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;
, 1000);@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text-align: center;
font-size: 9px;
<p id="date"></p>var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
else
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// If the number left is between 0 and 9 add a 0 before it
var daysStr = days < 10 ? "0" + days : days;
var hoursStr = hours < 10 ? "0" + hours : hours;
var minutesStr = minutes < 10 ? "0" + minutes : minutes;
var secondsStr = seconds < 10 ? "0" + seconds : seconds;
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;
, 1000);@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text-align: center;
font-size: 9px;
<p id="date"></p>var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();
// Update the count down every 1 second
var x = setInterval(function()
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// If the count down is over, write some text
if (distance < 0)
clearInterval(x);
document.getElementById("date").innerHTML = "EXPIRED";
else
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// If the number left is between 0 and 9 add a 0 before it
var daysStr = days < 10 ? "0" + days : days;
var hoursStr = hours < 10 ? "0" + hours : hours;
var minutesStr = minutes < 10 ? "0" + minutes : minutes;
var secondsStr = seconds < 10 ? "0" + seconds : seconds;
// Output the result in an element with id="date"
document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;
, 1000);@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face
font-family: Khula;
src: url('Khula-ExtraBold.ttf');
p
text-align: center;
font-size: 60px;
margin-top: 0px;
font-family: Khula;
#text
text-align: center;
font-size: 9px;
<p id="date"></p>answered Nov 13 '18 at 16:21
OramOram
723217
edited Nov 13 '18 at 16:50
answered Nov 13 '18 at 16:21
OramOram
723217
answered Nov 13 '18 at 16:21
OramOram
723217
answered Nov 13 '18 at 16:21
OramOram
723217
723217
minutes > 0is not needed, there's no negative values in minutes
– Zohir Salak
Nov 13 '18 at 16:26
I updated the answer.
– Oram
Nov 13 '18 at 16:27
add a comment |
minutes > 0is not needed, there's no negative values in minutes
– Zohir Salak
Nov 13 '18 at 16:26
I updated the answer.
– Oram
Nov 13 '18 at 16:27
minutes > 0 is not needed, there's no negative values in minutes– Zohir Salak
Nov 13 '18 at 16:26
minutes > 0 is not needed, there's no negative values in minutes– Zohir Salak
Nov 13 '18 at 16:26
I updated the answer.
– Oram
Nov 13 '18 at 16:27
I updated the answer.
– Oram
Nov 13 '18 at 16:27
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%2f53284996%2ffault-with-adding-numbers-in-javascript%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
4
Are you sure you want
minutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybeminutes < 10 && minutes > 0– wowserx
Nov 13 '18 at 16:08
Also, you're missing a closing
}for theif (distance < 0)– Oram
Nov 13 '18 at 16:09
@Oram no he's not, it's just poorly indented
– Patrick Roberts
Nov 13 '18 at 16:11
You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9
– Zohir Salak
Nov 13 '18 at 16:11
How do I do that? pretty new to this, Zohir?
– Albin Karlsson
Nov 13 '18 at 16:15