javascript error 'cannot read property of undefined'

Question

The javascript, html and css work in this jsfiddle but when entered into an html file like so:

<!doctype html>
<html>
  <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            var target = $(".mypara").offset().top;
            var interval = setInterval(function() {
                if ($(window).scrollTop() >= target) {
                    alert("made it!");
                    clearInterval(interval);
                    }
            }, 250);
        </script>
        <style>
            body {
            background-color: linen;
            height: 1000px;
            }
            p {
             color: blue;
              margin-top: 500px;
            }
        </style>

    </head>
    <body>
     <p class="mypara">asdfasdfasf</p>
    </body>
</html>

chrome console gives this error

Uncaught TypeError: Cannot read property 'top' of undefined(anonymous function) @ index - Copy.html:8

This error refers to line 8:

var target = $(".mypara").offset().top;

Can someone help me understand why?

Sean Wessell · Accepted Answer · 2015-08-04 01:45:52Z

4

Wrap your code in

$(document).ready (function (){
    // code here
});

You're trying to access an element in the DOM before it exists so when your trying to access the class the item doesnt exist yet. Or move your script below the elements in the html

Works in fiddle cause thet wrap you're code depending on your setting which defaults to domready I believe

answered Aug 4, 2015 at 1:45

Sean Wessell

3,5201 gold badge14 silver badges20 bronze badges

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

1 Comment

Sean Wessell Over a year ago

Happens to all of us. Sometimes all it takes is a 2nd set of eyes.

Oli Soproni B. · Accepted Answer · 2015-08-04 01:54:56Z

0

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">

        <style>
            body {
                background-color: linen;
                height: 1000px;
            }
            p {
                color: blue;
                margin-top: 500px;
            }
        </style>
    </head>

    <body>
        <p class="mypara">asdfasdfasf</p>
        <p class="mypara">Include js files to be at the bottom so that it would be the one to be loaded accordingly</p>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            // if document is ready then
            // its the only time to execute
            // process withing the block
            $(document).ready(function() {
                var target = $(".mypara").offset().top;
                var interval = setInterval(function() {
                    if ($(window).scrollTop() >= target) {
                        alert("made it!");
                        clearInterval(interval);
                    }
                }, 250);
            });

            </script>
    </body>
</html>

answered Aug 4, 2015 at 1:54

Oli Soproni B.

2,8103 gold badges24 silver badges47 bronze badges

1 Comment

Twineee The Dark Wizard Apr 30 at 1:35

please inclide more than code in your answers/

Collectives™ on Stack Overflow

javascript error 'cannot read property of undefined'

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related