javascript javascript错误“无法读取未定义的属性”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31799326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript error 'cannot read property of undefined'
提问by aquagremlin
The javascript, html and css work in this jsfiddlebut when entered into an html file like so:
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 console gives this error
chrome 控制台给出了这个错误
Uncaught TypeError: Cannot read property 'top' of undefined(anonymous function) @ index - Copy.html:8
未捕获的类型错误：无法读取未定义（匿名函数）@ index - Copy.html:8 的属性“top”
This error refers to line 8:
此错误是指第 8 行：
var target = $(".mypara").offset().top;
Can someone help me understand why?
有人可以帮我理解为什么吗？
回答by Sean Wessell
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
您试图在 DOM 中的元素存在之前访问它，因此当您尝试访问该类时，该项目尚不存在。或者将您的脚本移动到 html 中的元素下方
Works in fiddle cause thet wrap you're code depending on your setting which defaults to domready I believe
在小提琴中工作，因为根据您的设置，我相信默认为 domready 来包装您的代码
回答by Oli Soproni B.
<!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>
