Only "onload" form of JavaScript function works?

Question

I have a javascript function that dynamically positions a background image:

  window.onload = function() {
    bw = document.getElementsByClassName("BottomWrapper");
    if (bw.length===0){
      bw = document.getElementsByClassName("BottomWrapper2");
    }
    pos = window.innerWidth/2 - 490.5;
    bw=Array.prototype.slice.call(bw);
    bw[0].style.backgroundPosition="center 0px, " + pos + "px 0px";
  };

and it works. But if I name the same exact function and run it:

function position() {
  bw = document.getElementsByClassName("BottomWrapper");
  if (bw.length===0){
    bw = document.getElementsByClassName("BottomWrapper2");
  }
  pos = window.innerWidth/2 - 490.5;
  bw=Array.prototype.slice.call(bw);
  bw[0].style.backgroundPosition="center 0px, " + pos + "px 0px";
};
position();

I get the error:

TypeError: Cannot read property 'style' of undefined

I'm mystified. Why does the first function work and not the second?

@Craig Simplify the problem by removing the "bad" function and only using the "good" function by name; e.g. how does window.onload = position compare with position(). Extracting the definition of position eliminates the duplication and a potential source of "differences" for an "identical" function. Once this is done it can be safely argued for that the execution context is what matters or if something else is amiss. (Also, I recommend using local variables to avoid contamination.) — user166390
– user166390, Commented Dec 10, 2012 at 0:58

Patrick · Accepted Answer · 2012-12-10 00:42:49Z

3

if bw[0] is undefined, that means that document.getElementsByClassName("BottomWrapper2") returned undefined, which most likely means that the div was not on the page when the script was ran. If you load your code after your tag, this shouldn't happen.

The reason the first would work is because it is waiting for the onload event to fire.

answered Dec 10, 2012 at 0:42

Patrick

14k5 gold badges38 silver badges53 bronze badges

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

3 Comments

Craig Over a year ago

well I've run the 'position()' function from the javascript console after the page was loaded and I get the same result. The function also works when I attach it to the window.resize event. Also, I have the code in the footer below the div in question...so I don't see that this could be the issue.

user166390 Over a year ago

@Craig Simplify the problem by removing the "bad" function and only using the "good" function by name; e.g. how does window.onload = position compare with position(). Extracting the definition of position eliminates the duplication and a potential source of "differences" for an "identical" function. Once this is done it can be safely argued for that the execution context is what matters or if something else is amiss. (Also, I recommend using local variables to avoid contamination.)

Craig Over a year ago

my bad... I had the code in the footer but it turns out I also had the same code in a separate file that was included in the head ... sorry for the false alarm and thanks for all your responses!

user7282 · Accepted Answer · 2012-12-10 00:52:00Z

0

If you use the function like this, it will work

<html><head>
<script>

function position() {
  bw = document.getElementsByClassName("BottomWrapper");
  console.log(bw);
  if (bw.length===0){
    bw = document.getElementsByClassName("BottomWrapper2");
  }
  pos = window.innerWidth/2 - 490.5;
  bw=Array.prototype.slice.call(bw);
  bw[0].style.backgroundPosition="center 0px, " + pos + "px 0px";
  console.log(bw[0]);
};
   </script>
<body onload="position()">
<div class="BottomWrapper2"></div>
</body></head></html>

The previous ones causes error because, the function is called before the body is loaded

answered Dec 10, 2012 at 0:52

user7282

5,1969 gold badges44 silver badges73 bronze badges

1 Comment

Craig Over a year ago

my bad... I had the code in the footer but it turns out I also had the same code in a separate file that was included in the head ... sorry for the false alarm and thanks for all your responses!

Collectives™ on Stack Overflow

Only "onload" form of JavaScript function works?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related