javascript countdown won't display on webpage issue/problem-CodePudding

I'm doing a new year's countdown and for some reason my java script code wont display on the page. I am aware that it's working as it should because when I console.log the d, h, or m const it shows the timers going down. However, it's not displaying the timers on the webpage.

const days        = document.querySelectorAll('days')
const hours       = document.querySelectorAll('hours')
const minutes     = document.querySelectorAll('minutes')
const seconds     = document.querySelectorAll('seconds')
const currentYear = new Date().getFullYear();
const newYearTime = new Date('january 1 2023 00:00:00');

function updateCountdown() {
  const currentTime = new Date();
  const diff = newYearTime - currentTime;

  const d = Math.floor(diff / 1000 / 60 / 60 / 24);
  const h = Math.floor(diff / 1000 / 60 / 60) % 24;
  const m = Math.floor(diff / 1000 / 60) % 60;
  const s = Math.floor(diff / 1000) % 60;

  days.innerHTML    = d;
  hours.innerHTML   = h < 10 ? '0'   h : h;
  minutes.innerHTML = m < 10 ? '0'   m : m;
  seconds.innerHTML = s < 10 ? '0'   s : s;
}

setInterval(updateCountdown, 1000);

@import url('https://fonts.googleapis.com/css2?family=Bebas Neue&display=swap');
* {
  box-sizing: border-box;
}

body {
  background-image: url(joanna-kosinska-0CQfTLOVTPU-unsplash.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  font-family: "Bebas Neue", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0%;
  overflow: hidden;
}

h1 {
  font-weight: normal;
  font-size: 80px;
  margin: 90px;
  text-shadow: rgb(255, 180, 238) 5px 5px 15px, black 2px 2px 6px;
}

.countdown {
  display: flex;
  transform: scale(2.5);
}

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 15px;
  text-shadow: rgb(255, 180, 238) 4px 4px 15px, black 1px 1px 6px;
}

.time h2 {
  font-size: 28px;
  margin: 0 0 5px;
}

@media screen and (max-width: 800px) {
  h1 {
    font-size: 60px;
  }
  .time {
    margin: 5px;
  }
  .time h2 {
    font-size: 24px;
    margin: 0 0 10px;
  }
}

@media screen and (max-width: 650px) {
  h1 {
    font-size: 40px;
  }
  .time {
    margin: 5px;
  }
  .time h2 {
    font-size: 20px;
    margin: 0 0 10px;
  }
}

<h1>New Years Countdown</h1>

<div id="countdown" >

  <div >
    <h2 id="days"></h2>
    <small>Days</small>
  </div>

  <div >
    <h2 id="hours"></h2>
    <small>Hours</small>
  </div>

  <div >
    <h2 id="minutes"></h2>
    <small>Minutes</small>
  </div>

  <div >
    <h2 id="seconds"></h2>
    <small>Seconds</small>
  </div>

</div>

CodePudding user response：

You were selecting with wrong statement.
For id selector it should be document.querySelector("#id"). As, Id is specif only one element should have a specific id.
and to see your counter I have changed overflow:hidden to overflow-x:hidden only so that we can see content overflowing on y.

const days = document.querySelector('#days');
const hours = document.querySelector('#hours');
const minutes = document.querySelector('#minutes');
const seconds = document.querySelector('#seconds');


const currentYear = new Date().getFullYear();

const newYearTime = new Date('january 1 2023 00:00:00');


function updateCountdown() {
  const currentTime = new Date();
  const diff = newYearTime - currentTime;

  const d = Math.floor(diff / 1000 / 60 / 60 / 24);
  const h = Math.floor(diff / 1000 / 60 / 60) % 24;
  const m = Math.floor(diff / 1000 / 60) % 60;
  const s = Math.floor(diff / 1000) % 60;

  days.innerHTML = d;
  hours.innerHTML = h < 10 ? '0'   h : h;
  minutes.innerHTML = m < 10 ? '0'   m : m;
  seconds.innerHTML = s < 10 ? '0'   s : s;
}


setInterval(updateCountdown, 1000);

@import url('https://fonts.googleapis.com/css2?family=Bebas Neue&display=swap');
* {
  box-sizing: border-box;
}

body {
  background-image: url(joanna-kosinska-0CQfTLOVTPU-unsplash.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  font-family: "Bebas Neue", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0%;
  overflow-x: hidden;
}

h1 {
  font-weight: normal;
  font-size: 80px;
  margin: 90px;
  text-shadow: rgb(255, 180, 238) 5px 5px 15px, black 2px 2px 6px;
}

.countdown {
  display: flex;
  transform: scale(2.5);
}

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 15px;
  text-shadow: rgb(255, 180, 238) 4px 4px 15px, black 1px 1px 6px;
}

.time h2 {
  font-size: 28px;
  margin: 0 0 5px;
}

@media screen and (max-width: 800px) {
  h1 {
    font-size: 60px;
  }
  .time {
    margin: 5px;
  }
  .time h2 {
    font-size: 24px;
    margin: 0 0 10px;
  }
}

@media screen and (max-width: 650px) {
  h1 {
    font-size: 40px;
  }
  .time {
    margin: 5px;
  }
  .time h2 {
    font-size: 20px;
    margin: 0 0 10px;
  }
}

<!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">
  <link rel="stylesheet" href="style.css">
  <title>Countdown</title>
</head>

<body>

  <h1>New Years Countdown</h1>

  <div id="countdown" >

    <div >
      <h2 id="days"></h2>
      <small>Days</small>
    </div>

    <div >
      <h2 id="hours"></h2>
      <small>Hours</small>
    </div>

    <div >
      <h2 id="minutes"></h2>
      <small>Minutes</small>
    </div>

    <div >
      <h2 id="seconds"></h2>
      <small>Seconds</small>
    </div>

  </div>






  <script src="scripts.js"></script>
</body>

</html>

CodePudding user response：

Change the querySelectorAll to querySelector

const days = document.querySelector('#days')
const hours = document.querySelector('#hours')
const minutes = document.querySelector('#minutes')
const seconds =  document.querySelector('#seconds')

CodePudding user response：

Change all .querySelectorAll() to .querySelector() and prefix each selector with a #

const days = document.querySelector('#days')
const hours = document.querySelector('#hours')
const minutes = document.querySelector('#minutes')
const seconds =  document.querySelector('#seconds')

.querySelectorAll() collects all tags that match the selector and returns all of them as a NodeList. The HTML has only one of each selector so .querySelector() should be used. Each tag has an id so you must match the selector properly with a #.

const days = document.querySelector('#days')
const hours = document.querySelector('#hours')
const minutes = document.querySelector('#minutes')
const seconds =  document.querySelector('#seconds')


const currentYear = new Date().getFullYear();

const newYearTime = new Date('january 1 2023 00:00:00');


function updateCountdown() {
    const currentTime = new Date();
    const diff = newYearTime - currentTime;
    
    const d = Math.floor(diff / 1000 / 60 / 60 / 24);
    const h = Math.floor(diff / 1000 / 60 / 60) % 24;
    const m = Math.floor(diff / 1000 / 60) % 60;
    const s = Math.floor(diff / 1000) % 60;
    
   days.innerHTML = d;
   hours.innerHTML = h < 10 ? '0'   h : h;
   minutes.innerHTML = m < 10 ? '0'   m : m;
   seconds.innerHTML = s < 10 ? '0'   s : s; 
}


setInterval(updateCountdown, 1000);

@import url('https://fonts.googleapis.com/css2?family=Bebas Neue&display=swap');

*{
    box-sizing: border-box;
}

body {
    background-image: url(joanna-kosinska-0CQfTLOVTPU-unsplash.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    font-family: "Bebas Neue", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0%;
    overflow: hidden;
}

h1 {
    font-weight: normal;
    font-size: 80px;
    margin: 90px;
    text-shadow: rgb(255, 180, 238) 5px 5px 15px, black 2px 2px 6px;
}

.countdown {
    display: flex;
    transform: scale(2.5);
}

.time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 15px;
    text-shadow: rgb(255, 180, 238) 4px 4px 15px, black 1px 1px 6px;
}

.time h2 {
    font-size: 28px;
    margin: 0 0 5px;
}

@media screen and (max-width: 800px) {
    h1 {
        font-size: 60px;
    }
    .time {
        margin: 5px;
    }
    .time h2 {
        font-size: 24px;
        margin: 0 0 10px
        ;
    }
}

@media screen and (max-width: 650px) {
    h1 {
        font-size: 40px;
    }
    .time {
        margin: 5px;
    }
    .time h2 {
        font-size: 20px;
        margin: 0 0 10px
        ;
    }
}

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Countdown</title>
</head>
<body>

    <h1>New Years Countdown</h1>

    <div id="countdown" >

        <div >
            <h2 id="days"></h2>
            <small>Days</small>
        </div>
        
        <div >
            <h2 id="hours"></h2>
            <small>Hours</small>
        </div>
        
        <div >
            <h2 id="minutes"></h2>
            <small>Minutes</small>
        </div>
        
        <div >
            <h2 id="seconds"></h2>
            <small>Seconds</small>
        </div>

    </div>






 <script src="scripts.js"></script>   
</body>
</html>