CODEWITHSUNDEEP
javascriptfunctioneventsscroll
Prem Regmi
Prem Regmi

Reputation: 213

How to write multiple javascript function?

I am trying to call two function on scroll event only with javascript (no jquery) but only one works at a time. 



    window.onscroll = function() {cartFunction()};
    function cartFunction() {
        if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
            document.getElementById("shopping-cart").className = "sticky-cart";
        } else {
            document.getElementById("shopping-cart").className = "";
        }
    }
    window.onscroll = function() {cartFunction()};
    function cartFunction() {
        if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
            document.getElementById("scroll-top").className = "show";
        } else {
            document.getElementById("scroll-top").className = "";
        }
    }

Upvotes: 0

Views: 109

Answers (2)

Jaromanda X
Jaromanda X

Reputation: 1

Your code has two issues:

  1. You are defining the cartFunction function twice, so the second definition overwrites the first

  2. You are using windows.onload=, in javascript a variable/property can only hold one value, so you are effectively clobbering the first value and overwriting it with the second

Either one of these problems alone would cause only the second incarnation of the cartFunction to be called - so both issues need to be addressed

Firstly, assuming that you want to keep the two functions separate, and as globally scoped functions, the simplest change to your code is:

function cartFunction1() {
    if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
        document.getElementById("shopping-cart").className = "sticky-cart";
    } else {
        document.getElementById("shopping-cart").className = "";
    }
}

function cartFunction2() {
    if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
        document.getElementById("scroll-top").className = "show";
    } else {
        document.getElementById("scroll-top").className = "";
    }
}

window.onscroll = function() {cartFunction1(); cartFunction2()};

Alternatively, the last line can be replaced with 

window.addEventListener('scroll', function() {cartFunction1(); cartFunction2()});

or even

window.addEventListener('scroll', cartFunction1);
window.addEventListener('scroll', cartFunction2);

As you can see, you can add multiple 'scroll' event listeners and they'll ALL be called

Insert usual caveats about Internet Explorer 8 or earlier

If, however, those two functions can be combined AND don't need to be globally scoped

window.addEventListener('scroll', function cartFunction1() {
    if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
        document.getElementById("shopping-cart").className = "sticky-cart";
        document.getElementById("scroll-top").className = "show";
    } else {
        document.getElementById("shopping-cart").className = "";
        document.getElementById("scroll-top").className = "";
    }
});

Upvotes: 1

Muhammad Usman
Muhammad Usman

Reputation: 1362

You can use addEventListener by adding on scrolling 

 function runOnScroll_1(){
     //do you stufff
 }
 function runOnScroll_2(){
     //do you stufff
 }
 window.addEventListener("scroll", runOnScroll_1);
 window.addEventListener("scroll", runOnScroll_2);
                  .
                  .
                  .
                  .

and many others you can add and call on scroll

Upvotes: 0

Related Questions