Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active.

It seems like there is an error somewhere in the JS code that I can't quite pinpoint. Since I don't have much experience with JS, I'm struggling to understand what's causing the problem.

At the moment, I just need help figuring out why the script isn't working. Once I grasp how the code connects to the HTML, I'll dive into understanding its functionality.

Any assistance would be greatly 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>

javascriptjqueryhtmlcss

Answer №1

The <script> section with your countdown code should be placed in your HTML document before the closing <body> tag. Currently, you are using:

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

However, at this stage of page processing, the content inside the body has not been parsed yet, resulting in countdown being null. Consequently, when trying to set the .innerHTML of countdown:

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

This operation fails because countdown was not found.

SOLUTION:

Move the entire <script> section so that it appears just before the closing body tag (</body>) since, by then, all the HTML will have been parsed.

Alternatively...

If you continue to use JQuery, you can enclose all the contents of your <script> within JQuery's document.ready method to ensure that your code executes only after the document has been fully parsed:

<script>
  $(document).ready(function(){
     // Place all your code here

  });
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to make a JSONP request using jQuery?

Whenever I try to access this API through the browser, everything works fine and I receive the correct response. However, when I attempt to call the API using jQuery AJAX, I encounter an error. *The script is being refused execution from 'http://api ...

javascriptjqueryajax

Manipulating data with Angular's array object

I am having an issue with posting an object array. I anticipate the post to be in JSON format like this: {"campaign":"ben", "slots":[ { "base_image": "base64 code here" } ] } However, when I attempt to post ...

javascriptangularjsjsonhttppost

Integrating Google RECAPTCHA 2 into a PHP form input whitelist: A step-by-step guide

After adding Google reCAPTCHA to my form for increased security, I encountered an error due to the reCAPTCHA not being whitelisted. It seems that HTML5 does not support assigning the name attribute to a div element, such as <div name="myName"></di ...

phphtmlformsrecaptcha

Determine the number of elements in an array that is filtered using $.grep

Currently, I am utilizing the $.grep() function from here. $.each($.grep( [0,1,2], function(n,i){ return n > 1; }), function(){ alert(items matched); // perform an action } ); Is there a way to display the number of items that were matched in ...

jquery

"Strategies for effectively utilizing the .find method to locate specific users within a database

I'm currently working on developing a User Authentication system, but I've hit a roadblock when it comes to verifying users. Specifically, I'm struggling with understanding how to iterate through all of my users in order to filter out their ...

javascriptnode.jsmongodbexpressauthentication

How can you identify the resume of a web application once you return from opening the camera?

I'm working on a web application that utilizes the camera by following steps from this solution: How to access a mobile phone's camera using a web app? However, I am trying to figure out how to implement a callback function once the user return ...

javascripthtmlcamera

Is the jQuery time countdown malfunctioning?

Whenever I visit my site, the countdown timer starts. However, when I reload the page, the countdown timer resets. How can I fix this issue? Live demo link-- 01-Index <!doctype html> <html> <head> <title>Coming ...

jquerytimezonecountdown

How can I toggle the visibility of a div based on whether a variable is defined or not?

How can I display a specific div on my webpage only when certain variables in PHP pull out a specific result from a database? I attempted to use the code snippet below, but it's not working as expected. Can someone provide guidance on how to achieve ...

javascriptphpjqueryhtml

How can a JSON string be assigned to a variable for use in a Google pie chart?

I am currently experiencing an issue with my web server. I am sending a JSON object as an argument via render_template to my website, where I intend to use this data to display a Google pie chart. The problem arises when I try to assign the Google pie cha ...

javascripthtmljsongoogle-visualization

Learn how to incorporate an input field into a form using the same class name

I am facing a challenging JavaScript issue that I have been struggling to resolve. My predicament involves a dynamically formed table with form fields. Here is the code snippet in question: var table = document.getElementById("table"); var row = table. ...

javascriptjqueryajaxforms

IE9 does not properly display SVGs used as background images

Utilizing SVG files as backgrounds for my HTML elements has been successful in most major browsers. However, an issue arises when trying to ensure compatibility with Internet Explorer 9. The problem lies within IE9's rendering of the SVG backgrounds, ...

htmlcsssvginternet-explorer-9background-image

Why isn't my CSS button changing color on hover?

div ul li a.button:hover { text-color:#FF0000; background: #0040FF; } I have been attempting to create buttons that change color and text when hovered over. Despite trying different methods, the changes do not seem to be taking effect. Below is the co ...

htmlcss

The $scope.$watch function is not triggering events within a controller of a ui.bootstrap.modal

Currently, I am utilizing UI bootstrap for Angular and have successfully integrated the ui.bootstrap.modal component into my project. Everything seems to be working smoothly except for one issue I am encountering. Despite setting up a $scope.$watch to trac ...

javascriptangularjsangular-ui-bootstrap

Tips for resolving the error "Cannot access the title property of undefined" when utilizing NextJS prerendering

I am preparing this page in advance for a specific post within my Next.js application: import Head from 'next/head'; import Link from 'next/link'; import client from '../../lib/apollo/client' import POSTS_WITH_SLUGS from &apos ...

javascriptreactjsnext.jsserver-side-rendering

Tips for transferring information from Angular 6 to Node.js

Having recently delved into Angular 6 for the first time, I find myself tasked with sending data to a Node.js server. The code snippet below illustrates my approach within an Angular function: import { Component, OnInit } from '@angular/core'; ...

htmlnode.jsangularangular6

When attempting to assign a variable in my ngModel, what issue could be causing a problem?

I am facing an issue while trying to implement ngModel in my code. The code is not executing properly and an error is being displayed. Below is the code snippet: contact-form.component.html: <div class="container"> <form> <div class ...

htmlangular

Ensure that the header stays centered on the page as you scroll horizontally

Below is a given code snippet: header { text-align: center; } /* This section is just for simulation purposes */ p.text { width: 20rem; height: 50rem; } <html> <body> <header> <h1>Page Title</h1> <detail ...

htmlcss

Creating a custom dynamic favicon and title in NextJS

Hello there! I am in the process of creating a web constructor. Currently, my application functions as follows: I verify the URL that the user is visiting (such as localhost:3000) I identify their project name within my web constructor (localhost:3000 -&g ...

javascripthtmlcssnext.jsseo

What is the proper way to select this checkbox using Capybara in Ruby?

Is there a way to successfully check this checkbox?view image description I attempted the following: within('div[id="modalPersistEtapa"]') do element = @driver.find_element(:xpath, '//*[@id="2018_4"]/ ...

javascriptrubyseleniumcapybara

When I click on any input field, button, or other controls on a webpage, the page automatically zoom

I am currently trying to troubleshoot an issue with a bootstrap theme. It seems to be working perfectly on all browsers except for ios safari browsers. Whenever I click on an input field or button, the page suddenly zooms in. It's quite frustrating. ...

htmlioscsstwitter-bootstrapviewport