Stack Exchange
javascript external file is not executing code properly showing error
I am creating a website that has a onclick popup login box system and a live date/time system.
The whole JS code is in main.js (external file). the popup login system is working fine but the live date/time system is not working. when separating date/time code to the HTML page then it is working fine otherwise not.


// pop up login 
const loginBtn=document.querySelector("#login");
const loginWrap=document.querySelector("#login-wrap");
const cancelBtn=document.querySelector("#cancel-btn");
const mainContainer=document.querySelector("#main-div");

function loginPop(){
  loginWrap.classList.add("main-wrap-login");
  mainContainer.classList.add("login-blur");
}

loginBtn.onclick=function(){
  loginPop();
}

function loginClose(){
  loginWrap.classList.remove("main-wrap-login")
  mainContainer.classList.remove("login-blur");
}

cancelBtn.onclick=function(){
  loginClose();
}

$(function(){
    $('#notify').slimScroll({
        height:'auto',
        size:'7px',
        wheelstep:'100',
        barClass:'notify-scrollbar'
    });
});

// live date/time system
const dateWrap=document.querySelector('#profile-date');
const timeWrap=document.querySelector('#live-time');

let date=new Date();
let day=date.getDate();
let month=date.getMonth()+1;
let year=date.getFullYear();

dateWrap.textContent=day+'-'+month+'-'+year;

// get real time
let h=date.getHours();
let m=date.getMinutes();
let s=date.getSeconds();

function liveTime(){
   let time=new Date();

   let hour=time.getHours();
   let min=time.getMinutes(); 
   let sec=time.getSeconds();

   min=checkTime(min);
   sec=checkTime(sec);

   timeWrap.textContent=hour+':'+min+':'+sec;

   setTimeout(function(){
    liveTime();
   },1000);
}

window.onload=function(){
  liveTime();
}

// adding 0 before number
function checkTime(i){
  if(i<10){
    i="0"+i;
  }
  return i;
}

// profile angle down
const logoutBtn=document.querySelector('#profile-angle-down');
const logoutDrop=document.querySelector('#logout-dropdown');

function logout(){

  logoutDrop.classList.toggle("logout-dropdown");
}

logoutBtn.onclick=function(){
  logout();
}

// search box
const searchBtn=document.querySelector('#profile-search');
const searchBox=document.querySelector('#search-box');

function displaySearch(){

  searchBox.classList.toggle("profile-search-box");
}

searchBtn.onclick=function(){
  displaySearch();
}
<div class="col-md-6">
               <nav class="student-top-navbar justify-content-end position-relative">
                    <div class="profile-date">
                        <span class="text-color" ><i class="far fa-calendar-alt"></i>&nbsp;<span id="profile-date"></span>&nbsp;|&nbsp;<i class="far fa-clock"></i>&nbsp;<span id="live-time"></span></span>
                    </div>
                    <div class="profile-nav" >
                        <img src="images/levi.png" alt="" class="img-fluid border">&nbsp;
                        <span >Suraj Udai Aswal </span>
                        <i class="fas fa-angle-down" id="profile-angle-down"></i>

                        <div class="dp-none" id="logout-dropdown">
                            <a href="#"><i class="fas fa-sign-out-alt"></i> Logout</a>
                        </div>
                    </div>
                    <div class="profile-search">
                        <div class="dp-none" id="search-box">
                            <form action="#" method="post">
                                <input type="search" name="p_search" id="p_search" placeholder="Search here...">
                            </form>
                        </div>
                        <i class="fas fa-search" id="profile-search"></i>
                    </div>
               </nav>
            </div>




What errors do you get? Looks to me like you need to execute the JS only when the document is fully loaded.

I have included js file like this =>  ..which is i think is fine

Where's your script src= tag located?  In the <head>?

Yes it's inside head tag

It's showing uncaught typeerror: cannot set 'textcontent' of type null ..when i opened chrome debugging console

I recommend wrapping the script in $(document).ready(...)
