Adding DOCTYPE html to my index.html breaks my javascript

Question

When I add

<!DOCTYPE html>

to the top of my html file, my linked script.js stops working. However, it works fine without the doctype tag. It should add a class to my nav when i scroll down and remove it when i scroll back up.

Here is my javascript:

var myNav = document.getElementById('header');
window.onscroll = function () { 
    "use strict";
    if (document.body.scrollTop >= 50 ) {
        myNav.classList.add("nav-colored");
        myNav.classList.remove("nav-transparent");
    } 
    else {
        myNav.classList.add("nav-transparent");
        myNav.classList.remove("nav-colored");
    }
};

Any help is appreciated. Thanks!

Are there any errors firing? Or it simply does not run? I don't see anything obvious in the `onscroll` handler that violates strict mode... — Alexander Nied, Aug 26 '20 at 00:19
You might consider running your HTML through a validator-- perhaps you have some invalid markup for that doctype... — Alexander Nied, Aug 26 '20 at 00:20
My markup seems fine; when I ran it through https://validator.w3.org the only error I get is "Start tag seen without seeing a doctype first. Expected ." — bongerama, Aug 26 '20 at 00:26
_"My markup seems fine; when I ran it through validator.w3.org the only error I get is "Start tag seen without seeing a doctype first. Expected "_ That seems like it could be the problem-- why do you have markup prior to your doctype? Try resolving that and you might solve your issue. — Alexander Nied, Aug 26 '20 at 00:33

score 1 · Accepted Answer · answered Aug 26 '20 at 00:34

The error is because document.body.scrollTop in HTML 5 is deprecated instead use document.documentElement.scrollTop

var myNav = document.getElementById('header');
window.onscroll = function () {
  'use strict';
   if (document.documentElement.scrollTop >= 50) {
    myNav.classList.add('nav-colored');
    myNav.classList.remove('nav-transparent');
  } else {
    myNav.classList.add('nav-transparent');
    myNav.classList.remove('nav-colored');
  }
};

more information document.body.scrollTop Firefox returns 0 : ONLY JS

Adding DOCTYPE html to my index.html breaks my javascript

1 Answers1