Question

My code works fine in firefox but in Chrome I get an error. It’s just grabbing an element and setting the opacity so I’m not sure where I’m going wrong.

  var bot = document.getElementById ("bot");
  var top = document.getElementById ("top");
  top.style.opacity = 0.0;

I get the error “Uncaught TypeError: Cannot set property ‘opacity’ of undefined” for the third line of code and I’m not sure what the problem is. I’ve checked to make sure that the element’s id is ‘top’ and that it’s the only element with that id.

This is the relevant html code

<div class = "banner" id = "bot">
  <div class = "bannerTop" id = "top">
  </div>
</div>

Any help would be appreciated.

Answer 1

Change the name of your global variable to something other than top and it works in Chrome:

http://jsfiddle.net/jfriend00/y2QQT/

This is likely because window.top us a read-only variable that already exists.

You could also put your code into a local function so your var top isn’t a global variable and it should also work then as shown here: http://jsfiddle.net/jfriend00/62uYa/.