These 2 windows.onscroll javascript codes don't work together

Question

I am not a javascript expert. I have these two codes that don't work simultaneously. I don't know why and i ask you where could be the issue?

 // This is the first part //Get the button var mybutton = document.getElementById("scrollToTop"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() { scrollFunction() }; function scrollFunction() { if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function toTopFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } // When the user scrolls the page, execute myFunction window.onscroll = function() { myFunction() }; // This is the second part function myFunction() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("myBar").style.width = scrolled + "%"; }

Thanks to anyone

Answer 1

Every time you assign to window.onscroll it replaces the previous assignment.

If you want multiple event listeners, use addEventListener() .

window.addEventListener("scroll", scrollFunction);
window.addEventListener("scroll", myFunction);

or call both functions in a single handler:

window.onscroll = function() {
    scrollFunction();
    myFunction();
};