Javascript function order

Question

Sooooo, I'm having a JS problem. I'm fairly new to web development so I'm not entirely sure what I'm doing wrong with my JS.

//create script for #mainHeading focus @ pageload -- heading 1
    window.onload = function() {
        var mainHeading = document.getElementById("mainHeading");
        mainHeading.style.textShadow = '0px 0px 0px #fff'
    }

//create script for #subHeading focus @ pageload -- heading 2
    window.onload = function() {
        var subHeading = document.getElementById("subHeading");
        subHeading.style.textShadow = '0px 0px 0px #fff'
    }

So basically I wrote the function for my first heading to "focus" when the page loads. Then I decided to add a second heading with the same function. Now when I load my page only the second heading loads and not both.

Why is this??

James Allardice · Accepted Answer · 2013-03-31 15:20:58Z

7

Because you're overwriting the first function. Don't set the property like that... use addEventListener or equivalent instead:

window.addEventListener("load", function () {
    // First event handler
});
window.addEventListener("load", function () {
    // Second event handler
});

This method allows you to register as many event handlers as is necessary. Note that very old versions of Internet Explorer don't support it though, so you may need to feature detect it and use attachEvent in those old IE versions.

Currently, you are simply setting the value of a property. Consider the following code, which is effectively equivalent:

var obj = {};
obj.x = 10;
obj.x = 20;
console.log(obj.x); // 20

answered Mar 31, 2013 at 15:20

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Denys Séguret · Accepted Answer · 2013-03-31 15:20:57Z

3

You're replacing the onload function.

The right solution would be to add an event listener using addEventListener, they're additive :

window.addEventListener('load', function1);
window.addEventListener('load', function2);

answered Mar 31, 2013 at 15:20

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Comments

GitaarLAB · Accepted Answer · 2013-03-31 15:23:48Z

1

Instead of replacing your onload function, simply add instructions to it. Nice oldschool and therefore cross-browser compatible:

window.onload = function() {
    var mainHeading = document.getElementById("mainHeading"),
         subHeading = document.getElementById("subHeading");
    mainHeading.style.textShadow = '0px 0px 0px #fff';
    subHeading.style.textShadow = '0px 0px 0px #fff';
}

Good Luck!

answered Mar 31, 2013 at 15:23

GitaarLAB

14.7k12 gold badges62 silver badges83 bronze badges

Comments

David G · Accepted Answer · 2013-03-31 15:22:16Z

0

You're overwriting the method on the second one. You need to merge them together:

window.onload = function() {
    var mainHeading = document.getElementById("mainHeading"),
        subHeading = document.getElementById("subHeading");

    mainHeading.style.textShadow = subHeading.style.textShadow = 
                                                  '0px 0px 0px #fff';
};

You can also do what the other answers did as well. That's seems nice too.

answered Mar 31, 2013 at 15:22

David G

97.6k41 gold badges173 silver badges258 bronze badges

Collectives™ on Stack Overflow

Javascript function order

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related