Javascript function working in JSFiddle, but not on my local copy

StackOverflow https://stackoverflow.com/questions/22158016

  •  19-10-2022
  •  | 
  •  

Question

I'm trying to make a simple fadeout effect with Javascript.

It wasn't working when I tried it in my text editor + Google Chrome, so I copied it into JSFiddle and it worked!

http://jsfiddle.net/yLFFt/

However, I can't figure out what is correct in JSFiddle that is not correct in my original copy.

I'll post the code as I have it in Notepad++:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<html>
    <head>
        <title>My Site</title>
        <link rel="stylesheet" type="text/css" href="style2.css">
        </style>
        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-08000000-1', 'mysite.com');
          ga('send', 'pageview');

        </script>
        <script type="text/javascript" src="js/jquery_1.4.2.js"></script>
        <script type="text/javascript" src="js/flashing_logos.js"></script>
    </head>
    <body>
        <div id="background_logo">
            <img src="http://drivesmartbc.ca/sites/default/files/images/smiley%20face.thumbnail.jpg">
        </div>
        <div id="logo">
            <img src="https://lh4.googleusercontent.com/-b86bjfIcDMk/TXpUmwBK_FI/AAAAAAAAARY/ws-ypr2P39I/s200/9+smiley+face.jpg">
        </div>
        <div id="signup">
            <p id="instruction"> Get on board! </br> Enter your email to receive updates:</p>
            <script type="text/javascript" src="js/form-validation.js"></script>
            <form id="emailForm" action='#' method="post">
                <input name="email"  id="email" type="text" />
                <input type="button" value="Submit" name="submit" id="submit" />
            </form>
            <p id="success" class="success">Thanks - we'll keep in touch!</p>
            <p id="error" class="warning">There was an error</p>
        </div>
    </body>


</html>

and my Javascript looks like this:

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}
fade(document.getElementById('background_logo'));
Was it helpful?

Solution

You are calling document.getElementById('background_logo') from a script in the head and you aren't doing so from a function that you call later.

The element won't exist before the body is parsed.

Either move the script to after the end of <div id="background_logo"> (e.g. just before </body>) or wrap it in a function can call it on DOM ready or Load (which is what JSFiddle does by default).

See also Why does jQuery or a DOM method such as getElementById not find the element?.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top