Using Brackets, two <scripts> not working together in html file?

Question

I want to start off by saying I know pretty much next to nothing when it comes to javascript, and just a little HTML/CSS. Anyways, I have an HTML file open in Brackets for a school project and I am using two codes from w3school. They work individually, but if I have both scripts in my HTML file, only one work. I was wondering how to solve this?

These are the two codes that I want that are not working together

<script>
    window.onscroll = function() {
        myFunction()
    };

    var nav = document.getElementById("nav");
    var sticky = nav.offsetTop;

    function myFunction() {
        if (window.pageYOffset >= sticky) {
            nav.classList.add("sticky")
        } else {
            nav.classList.remove("sticky");
        }
    }
</script>

and

<script>
    window.onscroll = function() {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>

I would like to use both of these scripts and have them work together in my html file.

Again, both codes work properly by themselves, but when I have both in my html file, only one works.

Thank you in advance!

Answer 1

The reason only one works is that you're replacing the first assignment with the second. Since only one function can be the value of window.onscroll at any given time, the second assignment will always override the first. You can see this in a browser using something like the following:

document.addEventListener('DOMContentLoaded', function () {
  window.onscroll = function () {
    console.log('ONE')
  }

  window.onscroll = function () {
    console.log('TWO')
  }
})

By using addEventListener you can have more than one function invoked when the event fires:

  window.bindEventListener('scroll', function () {
    console.log('ONE')
  }

  window.bindEventListener('scroll', function () {
    console.log('TWO')
  }

Answer 2

See a merged version of the code, although I don't know what are you doing with the topFunction() does not look like to be in use.

var nav = document.getElementById("nav");
var sticky = nav.offsetTop;
window.addEventListener('scroll', function () {
    //class list for nav element
    var navClassList = nav.classList;

    //btn
    var myBtn = document.getElementById("myBtn");

    //sticky enable
    var stickyOn = (window.pageYOffset >= sticky);

    if (stickyOn) {
        navClassList.add("sticky")
    } else {
        navClassList.remove("sticky");
    }

    //is button view port
    var isButtonViewPort = (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0);

    if (isButtonViewPort) {
        myBtn.style.display = "block";
    } else {
        myBtn.style.display = "none";
    }
});

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

Answer 3

You are overriding scroll event of window, each time you assign a function to it. There is two solutions:

1- Using addEventListener method, it add a function which you pass as second parameter, as a handler to event you pass as first parameter:

example:

 var nav = document.getElementById("nav"); var sticky = nav.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { nav.classList.add("sticky") } else { nav.classList.remove("sticky"); } } function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } } function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } // Adding each function as a handler to event listener of scroll window.addEventListener('scroll', myFunction); window.addEventListener('scroll', topFunction); 

2- Merge two function into a single function and assign as you did before

example:

 var nav = document.getElementById("nav"); var sticky = nav.offsetTop; function thingsToDoOnScroll() { // First function body if (window.pageYOffset >= sticky) { nav.classList.add("sticky") } else { nav.classList.remove("sticky"); } // Second function body document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } } window.scroll = thingsToDoOnScroll;