how do i use localstorage on a countdown timer with user input using JS

Question

I created the code below for a countdowntimer which uses user input.

The code has 2 pages one page displays the count down (index page) and in the other page user enters details (details page).

Although the code runs, the main problem is that details page displays an error which updates every interval as shown.

details pg .

What can i do to remove the error? I have spent a week trying to figure out. What I am doing wrong?

My code

Index Page:

<body>
    <div class="menu-button" id="menu-button">
        <div class="bar"></div>
    </div>
    <div class="container">
        <div class="timer-displaybox">
            <div class="box">
                <p class="big-text" id="days-display">00</p>
                <p class="time">days</p>
            </div>
            <div class="box">
                <p class="big-text" id="hours-display">00</p>
                <p class="time">hours</p>
            </div>
            <div class="box">
                <p class="big-text" id="mins-display">00</p>
                <p class="time">mins</p>
            </div>
            <div class="box">
                <p class="big-text" id="secs-display">00</p>
                <p class="time">secs</p>
            </div>
        </div>
        <div class="text-container">Until the big day</div> 
        <div class="index-button">
            <a href="details.html"><input type="text" value="Click here to start"></a>
        </div>
    </div>
  </body>

Details Page:

<body> 
        <div class="details-box">
                <h2>Enter Your Details</h2>
                    <div class="name">
                        <input type="email" id= "inputName" placeholder="Jane" autofocus  required>
                    </div>
                    <div class="date-box">
                        <input type="date" id="inputDate" placeholder="dd/mm/yyyy"  required >
                    </div>
                    <div class="message-box">
                        <textarea placeholder="Message you want displayed" id="inputMessage" 
cols="45" rows="8"></textarea>
                    </div>
            <div class="button-container">
                    <input type="button" class="button" value="Submit" id="submit" disabled>
                    <span class="button" id="apply"><a href="index.html"><input type="button" value="Apply" ></a></span>  
            </div>       
        </div>
        <div class="contact-menu">
            <div class="contact-heading">
                <h2>Contact Me</h2>
            </div>
            <div class="contact-icons">
                <a href=""><i class="fa fa-linkedin fa-g fa-xl" ></i></a> 
                <a href=""><i class="fa fa-github fa-g fa-xl"></i></a> 
                <a href=""><i class="fa fa-twitter fa-g fa-xl"></i></a> 
                <a href=""><i class="fa fa-envelope fa-g fa-xl"></i></a> 
            </div> 
        </div>  
    </body>

Javascript Used:

document.addEventListener('DOMContentLoaded',()=>{
   
   const nameFromUser = document.getElementById('inputName')
   const dateFromUser=document.getElementById('inputDate')
   const messageFromUser =document.getElementById('inputMessage')
   const submitBtn = document.getElementById('submit')
   const sec = 1000
   const min = sec*60
   const hour = min*60
   const day = hour*24

window.addEventListener('input',()=>{
     if (nameFromUser.value && messageFromUser.value.length>2 && dateFromUser.value) {
        localStorage.setItem('dateInput',dateFromUser.value)
        localStorage.setItem('nameInput',nameFromUser.value)
        localStorage.setItem('messageInput',messageFromUser.value) 
        submitBtn.removeAttribute('disabled')  
     }
    })

    let timerId
    function countDown() {   
      const specialDay = new Date(localStorage.getItem('dateInput'))
      const messageDisplay= document.querySelector('.text-container')
      const timerDisplay = document.querySelector('.timer-displaybox')
      const today = new Date()
      const timeDiff = specialDay-today
        
        if (timeDiff <= -day) {
            timerDisplay.classList.add('timerUpgrade')
            timerDisplay.innerHTML=localStorage.getItem('nameInput')
            messageDisplay.innerHTML='I hope you had a wonderfull day!!!' 
            clearInterval(timerId)
            return  
        }
        if (timeDiff ==0) {
            timerDisplay.classList.add('timerUpgrade')
            timerDisplay.innerHTML= localStorage.getItem('nameInput')
            messageDisplay.innerHTML= localStorage.getItem('messageInput')
            clearInterval(timerId)
            return
        } 
        document.getElementById('days-display').innerHTML=Math.floor(timeDiff/day)
        document.getElementById('hours-display').innerHTML=Math.floor((timeDiff % day)/hour)
        document.getElementById('mins-display').innerHTML= Math.floor((timeDiff %  hour)/min) 
        document.getElementById('secs-display').innerHTML=Math.floor((timeDiff % min) /sec)    
     }
   timerId = setInterval(countDown,sec)
})

I have tried to introduce localstorage.clear() inside the countdown function but still the error is not fixed.

its not a localStorage problem. The problem is timerDisplay is null — Rick, Apr 10 '23 at 15:23

score 2 · Answer 1 · answered Apr 10 '23 at 15:00

It seems from your screenshot that it is for the HTML snippet annotated with details pg. Assuming you are loading the JavaScript code annotated as js page with this HTML, then the error is caused because in this line:

const timerDisplay = document.querySelector('.timer-displaybox')

There is no element on details pg that has a class of timer-displaybox, so the timerDisplay variable would be null. Then in the if blocks, for the following line:

timerDisplay.innerHTML=localStorage.getItem('nameInput')

timerDisplay is null and thus the error would be thrown as per your original screenshot.

To rectify this, you should consider splitting up your JavaScript such that only the relevant code is loaded for the relevant page. In otherwords, the countdown() function code and reletated code looks like it should only be included with the index pg HTML and not the details pg code.

score 0 · Answer 2 · answered Apr 10 '23 at 16:48

this code has A LOT of problems. Here's a few things for you to consider:

the error is happening because timerDisplay is null. nothing wrong with your localStorage.
you are using setInterval inside your countDown function, which means it's going to create an infinite number of loops all running at once. change it to setTimeout, or move setInterval outside your function.
You have a lot of duplicate code inside your if statements. Move all that outside if you want to execute it no matter what.
You can add an if(timerDisplay) before changing the innerHtml. This will not fix your problem, but it will make the error go away and help you debug the code.

Maybe something more like this would help:

function countDown(specialDay) {   
  const today = new Date()
  const timeDiff = specialDay-today;
    document.getElementById('days-display').innerHTML=Math.floor(timeDiff/day)
    document.getElementById('hours-display').innerHTML=Math.floor((timeDiff % day)/hour)
    document.getElementById('mins-display').innerHTML= Math.floor((timeDiff %  hour)/min) 
    document.getElementById('secs-display').innerHTML=Math.floor((timeDiff % min) /sec)    

    const timerDisplay = document.querySelector('.timer-displaybox');
    if(timerDisplay)
       timerDisplay.innerHTML=localStorage.getItem('nameInput');

    if(timeDiff > 0) {
          setTimeout(() => {
            countDown(specialDay);
          }, 1000);
    } else {
       // do something when timer reaches zero.
    }
}

how do i use localstorage on a countdown timer with user input using JS

My code

2 Answers2