Question

20

Uncaught TypeError: Cannot read property 'offsetTop' of null

rated 0 times [ 22] [ 2] / answers: 1 / hits: 36545 / 6 Years ago, thu, september 27, 2018, 12:00:00

I am using HTML, CSS and JavaScript to create a web page with a sticky and responsive navigation bar. I created the responsive navigation bar and am trying to make it sticky as well. The issue is that it's not sticky and shows error:
Uncaught TypeError: Cannot read property 'offsetTop' of null

HTML code:

<div class=topnav id=myTopnav>

<a href=#home class=active>Home</a>

<a href=#career>Careers</a>

<a href=#fellowship>About Us</a>

<a href=javascript:void(0); class=icon onclick=myFunctionForResponsive()>

    <i class=fas fa-bars></i>

</a>

</div>

JavaScript code:

// When the user scrolls the page, execute myFunction 

window.onscroll = function() {myFunctionForSticky()};



// Get the navbar

var navbar = document.getElementById(myTopnav);



// Get the offset position of the navbar

var sticky = navbar.offsetTop;



// Add the sticky class to the navbar when you reach its scroll position. 

Remove sticky when you leave the scroll position

function myFunctionForSticky() {

    if(window.pageYOffset >= sticky){

    console.log(window.pageYOffset >= sticky);

}

else{

    console.log(Not window.pageYOffset >= sticky);

}

 if (window.pageYOffset >= sticky) {

    navbar.classList.add(sticky);

  } else {

    navbar.classList.remove(sticky);  

  }

}



/*Toggle between adding and removing the responsive class to topnav

when the user clicks on the icon*/



function myFunctionForResponsive() {

    var x = document.getElementById(myTopnav);

    if (x.className === topnav) {

        x.className +=  responsive;

    } else {

        x.className = topnav;

    }

}

If I am taking class instead of id then it's showing the error:
Uncaught TypeError: Cannot read property 'remove' of undefined

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kayden

Add To Favorites

Follow

Total Points: 546

Total Questions: 102

Total Answers: 95

Location: Virgin Islands (U.S.)

Member since Fri, Mar 4, 2022

2 Years ago

answered 6 Years ago victorr · Accepted Answer

Code that wants to access the DOM needs to be wrapped in an event listener that listens on DOMContentLoaded.

Currently you are trying to access the element with the id myTopnav when the browser hasn't parsed the HTML yet, which means your document.getElementById(myTopnav); returns null. In the next line of code you are trying to read the offsetTop property of the null that your document.getElementById(myTopnav) returned, resulting in Cannot read property 'offsetTop' of null.

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {

  // When the event DOMContentLoaded occurs, it is safe to access the DOM



  // When the user scrolls the page, execute myFunction 

  window.addEventListener('scroll', myFunctionForSticky);



  // Get the navbar

  var navbar = document.getElementById(myTopnav);



  // Get the offset position of the navbar

  var sticky = navbar.offsetTop;



  // Add the sticky class to the navbar when you reach its scroll position. 

  // Remove sticky when you leave the scroll position



  function myFunctionForSticky() {

    if (window.pageYOffset >= sticky) {

      console.log(window.pageYOffset >= sticky);

    } else {

      console.log(Not window.pageYOffset >= sticky);

    }

    if (window.pageYOffset >= sticky) {

      navbar.classList.add(sticky);

    } else {

      navbar.classList.remove(sticky);

    }

  }



  /*Toggle between adding and removing the responsive class to topnav

  when the user clicks on the icon*/



  function myFunctionForResponsive() {

    navbar.classList.toggle('responsive');

  }

})