how to fix countdown clock JS HTML CSS

Question

My JS is not working on my website. Im quite new to this and im setting up a website but I want a timer to show when the site will be active.

I must be missing something - I believe the error lies withing the JS as i know little about this.

For now I just want to know why the script is not working. Once I have a better understanding of how the code is linked to html I shall start trying to understand what its doing.

Any help is really appreciated.

  
        var target_date = new Date().getTime() + (1000*3600*48); // set the countdown date
        var days, hours, minutes, seconds; // variables for time units
        
        var countdown = document.getElementById("tiles"); // get tag element
        
        getCountdown();
        
        setInterval(function () { getCountdown(); }, 1000);
        
        function getCountdown(){
        
        	// find the amount of "seconds" between now and target
        	var current_date = new Date().getTime();
        	var seconds_left = (target_date - current_date) / 1000;
        
        	days = pad( parseInt(seconds_left / 86400) );
        	seconds_left = seconds_left % 86400;
        		 
        	hours = pad( parseInt(seconds_left / 3600) );
        	seconds_left = seconds_left % 3600;
        		  
        	minutes = pad( parseInt(seconds_left / 60) );
        	seconds = pad( parseInt( seconds_left % 60 ) );
        
        	// format countdown string + set tag value
        	countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; 
        }
        
        function pad(n) {
        	return (n < 10 ? '0' : '') + n;
        }

                body
                {
                	width:1000px;
                	height:1000px;
                	position:relative;
                	top:10px;
                	margin:auto;
                	background-image:url('bg copy.png');
                }
                
                #Header
                {
                	width:1000px;
                	background-image:url('Logo 3 small.png');
                	background-repeat:no-repeat;
                	background-position:center;
                }
                
                #Middle
                {
                	width:1000px;
                }
                
                #Soon
                {
                	height:100px;
                	width:1000px;
                	font-family:"Malgun Gothic Semilight";
                	font-size:20px;
                	color:Black;
                	
                }
                
                #Timer
                {
                	height:200px;
                	width:1000px;
                }
                
                #Bottom
                {
                	font-size:80px;
                }
                

                #countdown{
                	width: 465px;
                	height: 112px;
                	text-align: center;
                	background: #222;
                	background-image: -webkit-linear-gradient(top, #222, #333, #333, #222); 
                	background-image:    -moz-linear-gradient(top, #222, #333, #333, #222);
                	background-image:     -ms-linear-gradient(top, #222, #333, #333, #222);
                	background-image:      -o-linear-gradient(top, #222, #333, #333, #222);
                	border: 1px solid #111;
                	border-radius: 5px;
                	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
                	margin: auto;
                	padding: 24px 0;
                	position: absolute;
                  top: 0; bottom: 0; left: 0; right: 0;
                }
                
                #countdown:before{
                	content:"";
                	width: 8px;
                	height: 65px;
                	background: #444;
                	background-image: -webkit-linear-gradient(top, #555, #444, #444, #555); 
                	background-image:    -moz-linear-gradient(top, #555, #444, #444, #555);
                	background-image:     -ms-linear-gradient(top, #555, #444, #444, #555);
                	background-image:      -o-linear-gradient(top, #555, #444, #444, #555);
                	border: 1px solid #111;
                	border-top-left-radius: 6px;
                	border-bottom-left-radius: 6px;
                	display: block;
                	position: absolute;
                	top: 48px; left: -10px;
                }
                
                #countdown:after{
                	content:"";
                	width: 8px;
                	height: 65px;
                	background: #444;
                	background-image: -webkit-linear-gradient(top, #555, #444, #444, #555); 
                	background-image:    -moz-linear-gradient(top, #555, #444, #444, #555);
                	background-image:     -ms-linear-gradient(top, #555, #444, #444, #555);
                	background-image:      -o-linear-gradient(top, #555, #444, #444, #555);
                	border: 1px solid #111;
                	border-top-right-radius: 6px;
                	border-bottom-right-radius: 6px;
                	display: block;
                	position: absolute;
                	top: 48px; right: -10px;
                }
                
                #countdown #tiles{
                	position: relative;
                	z-index: 1;
                }
                
                #countdown #tiles > span{
                	width: 92px;
                	max-width: 92px;
                	font: bold 48px 'Droid Sans', Arial, sans-serif;
                	text-align: center;
                	color: #111;
                	background-color: #ddd;
                	background-image: -webkit-linear-gradient(top, #bbb, #eee); 
                	background-image:    -moz-linear-gradient(top, #bbb, #eee);
                	background-image:     -ms-linear-gradient(top, #bbb, #eee);
                	background-image:      -o-linear-gradient(top, #bbb, #eee);
                	border-top: 1px solid #fff;
                	border-radius: 3px;
                	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
                	margin: 0 7px;
                	padding: 18px 0;
                	display: inline-block;
                	position: relative;
                }
                
                #countdown #tiles > span:before{
                	content:"";
                	width: 100%;
                	height: 13px;
                	background: #111;
                	display: block;
                	padding: 0 3px;
                	position: absolute;
                	top: 41%; left: -3px;
                	z-index: -1;
                }
                
                #countdown #tiles > span:after{
                	content:"";
                	width: 100%;
                	height: 1px;
                	background: #eee;
                	border-top: 1px solid #333;
                	display: block;
                	position: absolute;
                	top: 48%; left: 0;
                }
                
                #countdown .labels{
                	width: 100%;
                	height: 25px;
                	text-align: center;
                	position: absolute;
                	bottom: 8px;
                }
                
                #countdown .labels li{
                	width: 102px;
                	font: bold 15px 'Droid Sans', Arial, sans-serif;
                	color: #f47321;
                	text-shadow: 1px 1px 0px #000;
                	text-align: center;
                	text-transform: uppercase;
                	display: inline-block;

            <head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
            <title>SPAutoTech Home</title>
            <link href="localcss.css" rel="stylesheet" type="text/css" />
            <script src="jquery-3.4.0.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
            <script src="java.js"></script>
            </head>
            
            		<body>
            		
            				<div id="Header" style="height:400px">
            				</div>
            				
            				<div id="Middle" style="height:300px">
            				
            						<div id="Soon">
            						</div>
            					  
            						<div id="counter">	
            							<div id="countdown">
            							  <div id='tiles'></div>
            							  <div class="labels">
            							    <li>Days</li>
            							    <li>Hours</li>
            							    <li>Mins</li>
            							    <li>Secs</li>
            							  </div>
            							</div>
            					 	</div>
            						<script src="java.js"></script>
            						
            						<div id="Bottom" style="height:300px">
            							 
            						</div>
            				</div>
            						
            				<div id="Bottom1" style="height:300px">
            					<center><b>COMING SOON</b></center>
            				</div>
            
            		</body>
            		
            </html>

Have you opened your browser's developer tools (F12) and looked at the Console tab for any errors? What is it that's "not working"? It seems to be counting down to me. — Scott Marcus
– Scott Marcus, Commented Apr 11, 2019 at 18:04
You do know that you've got 2 external script references to java.js, and two different reference for JQuery, right? — Scott Marcus
– Scott Marcus, Commented Apr 11, 2019 at 18:07
The resource from “ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).[Learn More] — user3254111
– user3254111, Commented Apr 11, 2019 at 18:07
would x2 java references matter ? i put another incase I had done one incorrect — user3254111
– user3254111, Commented Apr 11, 2019 at 18:08

Scott Marcus · Accepted Answer · 2019-04-11 18:48:29Z

1

Your <script> element that contains your countdown code is inserted into your HTML document before the <body> tag. In that code, you have:

var countdown = document.getElementById("tiles"); // get tag element

But, at this point in the page processing, none of the content in the body has been parsed and so countdown is null. Later, when you try to set the .innerHTML of countdown:

countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";

It fails because countdown was never found.

SOLUTION:

Pick up your entire <script> and move it so that it is just before the closing body tag (</body>) because, by that time, all the HTML will have been parsed.

Or...

If you continue to use JQuery, you can take the entire contents of your <script> and place it inside of JQuery's document.ready method to establish your code as code that should only run once the document has been fully parsed:

<script>
  $(document).ready(function(){
     // All your code would go in here

  });
</script>

answered Apr 11, 2019 at 18:48

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3254111 Over a year ago

Fantastic - I did it the first way and was successfull Thank you for the help I think I need to go a little further to basics here and get a better understanding of what im doing.

Scott Marcus Over a year ago

@user3254111 But, you do still have two errors in your page because of bad references to external scripts.

Collectives™ on Stack Overflow

how to fix countdown clock JS HTML CSS

1 Answer 1

Or...

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Or...

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related