Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a countdown clock for an assignment. I asked my professor for help, but she was not able to help me. It works fine in Chrome, but in all other browsers is breaks and does not display the time.
here is the HTML, Javascript and CSS. It works here when I run the code, but it not working on Firefox, IE and etc.
function getTimeRemaining(deadline) {
var t = Date.parse(deadline) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, deadline) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining("2016-5-6 19:30:00 GMT+06:00");
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = '2016-5-6 19:30:00 GMT+06:00';
initializeClock('clockdiv', deadline);
body{
text-align: center;
background: white;
font-family: sans-serif;
font-weight: 100;
}
h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv{
font-family: sans-serif;
color: black;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: rgb(209,0,0);
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: white;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Elly Belly Style</title>
<link href="npg_ebs.css" rel="stylesheet" type="text/css" />
<link href = "npg_clock.css" rel= "stylesheet" type="text/css"/>
</head>
<body>
<div id= "container">
<h2>Countdown to the next Auction</h2>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</section> <!-- end main column -->
</section>
</div>
<footer>
<ul>
<li>Elly Belly Style</li>
<!-- <li>Ready To Ship</li> commented out for project-->
<li>Ready to Ship</li>
<!-- <li>Elly Wars Auctions</li> commented out for project-->
<li>Elly Wars</li>
<li>Completed Designs</li>
<li>About Us</li>
<li>Custom Order Inquiry</li>
<li>Links</li>
<li>Design Document</li>
<li>Business Hours</li>
<li>Sitemap</li>
<li><img src="npg_mail.png" alt="email"/>Email:
<script language="JavaScript"> <!--
document.write ('<A HREF="mai')
document.write ('lto:ellybellybows')
document.write ('#')
document.write ('gmail.com">ellybellybows')
document.write ('#')
document.write ('gmail.com</A>')
// email link hidden-->
</script>
</li>
</ul>
</footer>
<script>
//script for dropdown button
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<script src="npg_clock.js"></script>
</body>
</html>
the issue is the incorrect formatting of Date string, follow the ISO 8601 format, use: 2016-05-06T19:30:00+06:00.
fiddle demo of the fixed code.
Related
I wanna make Countdown Timer with input, start button and stop/reset button. I try to make the input and start button but it does kinda not work, how to fix this problem with the input for the timer that can work?
const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("mins");
const secondsEl = document.getElementById("seconds");
const newYears = document.getElementById("Timer").value;
function countdown(){
const newYearsDate = new Date(newYears);
const currentDate = new Date();
const totalSeconds = (newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600 ) % 24;
const mins = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = formatTime(hours);
minsEl.innerHTML = formatTime(mins);
secondsEl.innerHTML = formatTime(seconds);
}
function formatTime(time){
return time < 10 ? `0${time}` : time;
}
// initial call
if(start){
countdown();
setInterval(countdown, 1000);
}
else{
alert("invalid date");
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
*{
box-sizing: border-box;
}
body{
background-image: url("assets/newyear.jpg");
background-size: cover;
background-position: center center;
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
font-family: "Poppins", sans-serif;
margin: 0;
}
h1{
font-weight: normal;
font-size: 4rem;
margin-top: 5rem;
color: white;
}
.countdown-container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.big-text{
font-weight: bold;
font-size: 6rem;
line-height: 1;
margin: 1rem 2rem;
color: white;
}
.countdown-el{
text-align: center;
color: white;
}
.countdown-el span{
font-size: 1.3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CountDown Timer</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div id="countdowninput">
<input type="text" id="Timer" value="1 Jan 2023"/>
<button id="start" type="submit">Start</button>
</div>
<h1>New Years Eve</h1>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdown-el mins-c">
<p class="big-text" id="mins">0</p>
<span>minutes</span>
</div>
<div class="countdown-el seconds-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
</body>
</html>
After this maybe I would do change the image button on the timer bottom, like new year, birthday, Christmas, and more.
Here you go! Create an input with whatever id you choose, in this case I used #dateSearch.
Create an input value, then create a new Date object from the input value.
Then the rest of the code is what is executing the countdown!
Enjoy.
document.getElementById("dateSearch").addEventListener("change", function() {
var input = this.value;
var countDownDate = new Date(input).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's 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="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
})
#demo {
font-size: 3rem;
font-weight: bolder;
text-align: center;
}
.form-input, h1 {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" referrerpolicy="no-referrer"></script>
<div class="form-input">
<label for="dateSearch">Enter a Date to Countdown:</label>
<input type="date" id="dateSearch">
</div>
<div class="countdown">
<h1>Countdown Timer:</h1>
<p id="demo"></p>
</div>
I want to create the following resultenter image description here
It is a cowntdown that I want to be in my html code.I have created the timer with javascript and it works fine but I cannot make it appear as I want in my html.I want it to appear exactly like the picture.
Here is my code
my html
<div class="container">
<hr class="new4">
<p class="countdown text-center">Μέχρι το δορυφορικό συμπόσιο απομένουν</p>
<p id="timer" class="timer text-center"></p>
<hr class="new4">
</div>
and my javascript
// Set the date we're counting down to
var countDownDate = new Date("Sep 19, 2020 16:30:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's 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="demo"
document.getElementById("timer").innerHTML = days + " " + hours + " "
+ minutes + " " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Συμβαίνει Τώρα";
}
}, 1000);
and my css
hr.new4 {
border: 1px solid white;
}
.timer{
font-size: 117px;
color:white;
}
Here is how it looks for me.enter image description here
I can not understand how to make the text apear exatly bellow the numbers and I cant understand how to add paddings between each of the elements that get return by the javascript document.getElementById() function.
Please help me it is an emerjency I must have it until tomorow
To make each time unit a different element, update the timer HTML like so:
document.getElementById("timer").innerHTML = `
<span data-unit="Days">${days}</span>
<span data-unit="Hours">${hours}</span>
<span data-unit="Minutes">${minutes}</span>
<span data-unit="Seconds">${seconds}</span>
`;
Then style them using CSS, to add margin, and a pseudo element representing the unit:
#timer span {
display: inline-block;
margin: 10px;
}
#timer span:before {
content: attr(data-unit);
position: absolute;
transform: translate(offsetX, offsetY); /* Here you have to find the correct X and Y values */
}
To properly center the text under the numbers I recommend that you use flexbox.
I created additional containers to properly space things with display: flex and used flex-direction: column when necessary or did not defining any value for my flex container in some places because the default value for flex-direction is row.
Note that I separated the timer into different <p> and used static values in our <p> elements for our digits that represent days, hours, minutes and seconds:
Separating them into different <p> allow us to have more control over their positioning.
The static values are only for illustrative purposes because I did not modify your JavaScript code.
You have to modify your JavaScript code to update each <p> in the HTML individually.
Check my CodePen example with the modified HTML and CSS: https://codepen.io/stevescruz/pen/bGpLjKj.
<div class="container">
<hr class="new4">
<div class="timer-container">
<p class="countdown text-center">Μέχρι το δορυφορικό συμπόσιο απομένουν</p>
<div class="content-container">
<div class="unit-container">
<p id="timer" class="timer text-center">22</p>
<p class="timer-text">day</p>
</div>
<div class="unit-container">
<p id="timer" class="timer text-center">23</p>
<p class="timer-text">hours</p>
</div>
<div class="unit-container">
<p id="timer" class="timer text-center">41</p>
<p class="timer-text">min</p>
</div>
<div class="unit-container">
<p id="timer" class="timer text-center">16</p>
<p class="timer-text">sec</p>
</div>
</div>
</div>
<hr class="new4">
</div>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
hr.new4 {
border: 1px solid white;
}
.timer-container {
display: flex;
flex-direction: column;
}
.content-container {
display: flex;
justify-content: space-around;
}
.countdown {
font-size: 48px;
font-weight: bold;
color: white;
align-self: center;
}
.unit-container {
display: flex;
flex-direction: column;
align-items: center;
}
.timer {
font-size: 117px;
color: white;
}
.timer-text {
font-size: 60px;
color: white;
}
body {
background: #194079;
}
I am trying to display a countdown timer for coming soon webpage. Everything is working fine except for the timer that is written in javascript. I also tried by making it an external file. It also reads the file when making external but the timer is not shown on the page.
This is my blade file
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Coming Soon</title>
<link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital#1&family=Montserrat&family=Open+Sans+Condensed:wght#300&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="soon">
<p> We will be back with beautiful website</p>
<h1>COMING SOON</h1>
<hr>
<p id="launch"></p>
</header>
<script>
var date = new Date("Jan 1, 2020 00:00:00").getTime();
var countdownfunction = setInterval(function() {
var today = new Date().getTime();
var distance = date - today;
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);
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(countdownfunction);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
And this is css
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('/images/comingsoon.jpg');
height: 100vh;
background-position: center;
background-size: cover;
}
.soon {
top: 50%;
left: 50%;
position: absolute;
transform:translate(-50%,-50%);
color: #fff;
text-align: center;
font-family: 'Balsamiq Sans', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Playfair Display', serif;
}
h1 {
font-size: 60px;
letter-spacing: 15px;
}
hr{
width: 50%;
margin: 30px auto;
border: 1.5px solid #fff;
}
p{
font-size:20px;
margin-bottom:30px;
}
you have to add a tag with id demo like a div
and also your future date is wrong
<header>
<div class="soon">
<p> We will be back with beautiful website</p>
<h1>COMING SOON</h1>
<hr>
<div id=demo></div>div>
<p id="launch"></p>
</header>
your date is expired change it to something in the future
var date = new Date("Jan 1, 2021 00:00:00").getTime();
change <p id="launch"></p> to <p id="demo"></p> on html code,
or change document.getElementById("demo") to document.getElementById("launch") on script code
I have a problem aligning text inside a border. The text needs to be in the centre of the border.
As you can see the text is slightly right and the number is slightly left
I managed to get it working on chrome but it doesn't work on code pen, safari or internet explorer. Here is the codepen
Here is my HTML
// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();
// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';
// 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 weeks, days, hours, minutes and seconds
// var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
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="demo"
document.getElementById("Countdown_Days").innerHTML =
days + "<span>" + "<br>" + "Days" + "</span>";
document.getElementById("Countdown_Hours").innerHTML =
hours + "<span>" + "<br>" + "Hours" + "</span>";
document.getElementById("Countdown_Minutes").innerHTML =
minutes + "<span>" + "<br>" + "Minutes" + "</span>";
document.getElementById("Countdown_Seconds").innerHTML =
seconds + "<span>" + "<br>" + "Seconds" + "</span>";
});
h2 {
border: solid 1px #000;
border-radius: 100%;
display: inline-flex;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
text-align: center;
margin-left: 5px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<div class="countdown">
<h1>Launch In</h1>
<h2 id="Countdown_Days">58<span><br>Days</span></h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
<h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
<h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
</div>
</div>
</div>
</div>
Thanks for any help in advance!
I've changed the flex-direction for the H2 elements and instead of using span and br elements I used div elements. Is this the result you were looking for?
// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();
// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';
// 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 weeks, days, hours, minutes and seconds
// var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
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="demo"
document.getElementById("Countdown_Days").innerHTML = `<div>${days}</div><div>Days</div>`;
document.getElementById("Countdown_Hours").innerHTML =`<div>${hours}</div><div>Hours</div>`;
document.getElementById("Countdown_Minutes").innerHTML = `<div>${minutes}</div><div>Minutes</div>`;
document.getElementById("Countdown_Seconds").innerHTML = `<div>${seconds}</div><div>Seconds</div>`;
});
h2 {
align-items: center;
border: solid 1px #000;
border-radius: 100%;
display: inline-flex;
flex-direction: column;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
margin-left: 5px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<div class="countdown">
<h1>Launch In</h1>
<h2 id="Countdown_Days">58<span><br>Days</span></h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
<h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
<h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
</div>
</div>
</div>
</div>
Use this css instead of yours css:
.countdown {
display: flex;
}
h2{
border: solid 1px #000;
border-radius: 100%;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
text-align: center;
margin-left: 5px;
}
And your h1 is placed above countdown div
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<h1>Launch In</h1>
<div class="countdown">
<h2 id="Countdown_Days">58<span><br>Days</span></h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
<h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
<h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
</div>
</div>
</div>
</div>
// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();
// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';
// 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 weeks, days, hours, minutes and seconds
// var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
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="demo"
document.getElementById("Countdown_Days").innerHTML =
days + "<span>" + "<br>" + "Days" + "</span>";
document.getElementById("Countdown_Hours").innerHTML =
hours + "<span>" + "<br>" + "Hours" + "</span>";
document.getElementById("Countdown_Minutes").innerHTML =
minutes + "<span>" + "<br>" + "Minutes" + "</span>";
document.getElementById("Countdown_Seconds").innerHTML =
seconds + "<span>" + "<br>" + "Seconds" + "</span>";
});
.countdown {
display: flex;
}
h2{
border: solid 1px #000;
border-radius: 100%;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
text-align: center;
margin-left: 5px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<h1>Launch In</h1>
<div class="countdown">
<h2 id="Countdown_Days">58<span><br>Days</span> </h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span> </h2>
<h2 id="Countdown_Minutes">42<span> <br>Minutes</span>
</h2>
<h2 id="Countdown_Seconds">40<span> <br>Seconds</span>
</h2>
</div>
</div>
</div>
</div>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
*Note the following code is completed copy and pasted, I do not know js but want to add this one feature of a countdown clock to my site (original code found at https://codepen.io/SitePoint/pen/MwNPVq)
here is the code (jsfiddle included at bottom)
<head>
<script>
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
</script>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</body>
http://jsfiddle.net/mktc6q4n/
Does anyone know why this is not working locally in my browser?
You are trying to call the function initializeClock when the elements haven't been loaded yet. Meaning that the div (id clockdiv) does not exist yet, so the query selector can't find it and returns null.
Moving the script to the end of the body should solve it (lazy fix).
This works.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
body {
text-align: center;
background: #00ECB9;
font-family: sans-serif;
font-weight: 100;
}
h1 {
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div {
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span {
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext {
padding-top: 5px;
font-size: 16px;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
window.onload = function () {
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
}
</script>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</body>
</html>
The problem here is that your javascript is being executed before the HTML is rendered. You have 2 options to fix this
Load the script tag at the end of the <body> tag, so you can copy this snippet
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<script>
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
</script>
</body>
Wait till the DOM is completely loaded with
<script>
window.addEventListener("DOMContentLoaded", function () {
// do stuff
}, false);
</script>
So, copying this will make it work as well
<head>
<script>
window.addEventListener("DOMContentLoaded", function () {
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
}, false);
</script>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</body>
</html>
Here you have a small tutorial on how to get started with HTML, CSS and Javascript. I hope it helps
How TO - Build a Website
Your javascript in the head is not being executing because it is not inside the body or attached to any event. You run it when the page loads with window.onload = function(){} or you can place at the end of the body.
You can copy any of the following snippets.
Function run when the window loads:
<html>
<head>
<script>
window.onload = function(){
initializeClock('clockdiv', deadline);
}
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
</script>
<style>
body{
text-align: center;
background: #00ECB9;
font-family: sans-serif;
font-weight: 100;
}
h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</body>
</html>
Script at end of body:
<html>
<head>
<style>
body{
text-align: center;
background: #00ECB9;
font-family: sans-serif;
font-weight: 100;
}
h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<script>
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
</script>
</body>
</html>