javascript错误“无法读取未定义的属性”

Question

javascript、html 和 css 在这个jsfiddle 中工作，但是当输入到这样的 html 文件时：

<!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 控制台给出了这个错误

未捕获的类型错误：无法读取未定义（匿名函数）@ index 的属性 'top' - Copy.html:8

此错误是指第 8 行：

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

有人可以帮我理解为什么吗？

Answer 1

将您的代码包装在

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

您试图在 DOM 中的元素存在之前访问它，因此当您尝试访问该类时，该项目尚不存在。 或者将您的脚本移动到 html 中的元素下方

在小提琴中工作，因为你的代码取决于你的设置，默认为 domready 我相信

Answer 2

<!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>