admin管理员组文章数量:1323716
I keep getting the error links[i] is undefined
.
I define it explicitly and yet it keeps giving me that error -- any ideas?
I am trying to do unobtrusive image rolovers on 5 links that I have.
function loadImages(){
path = 'uploads/Splash-4/nav/';
links = new Array();
for (i=1;i<=5;i++){
var id = "link-"+i;
var defaultState = '<img src="' +path+i+'.jpg" border="0" />';
links[i] = document.getElementById(id);
// Place all image linksinto anchor
links[i].innerHTML = defaultState;
// What to do on mouseover
links[i].onmouseover = function() {
links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
}
// What to do on mouse oUt
links[i].onmouseout = function() {
links[i].innerHTML = defaultState;
}
}
}
window.onload = loadImages;
HTML:
<a href="?page=Profile" id="link-1"></a>
<a href="?page=for-sale" id="link-2"></a><br />
<a href="?page=testimonials" id="link-3"></a><br />
<a href="?page=free-home-appraisal" id="link-4" /></a><br />
<a href="?page=contact-me" id="link-5"></a><br />
I keep getting the error links[i] is undefined
.
I define it explicitly and yet it keeps giving me that error -- any ideas?
I am trying to do unobtrusive image rolovers on 5 links that I have.
function loadImages(){
path = 'uploads/Splash-4/nav/';
links = new Array();
for (i=1;i<=5;i++){
var id = "link-"+i;
var defaultState = '<img src="' +path+i+'.jpg" border="0" />';
links[i] = document.getElementById(id);
// Place all image linksinto anchor
links[i].innerHTML = defaultState;
// What to do on mouseover
links[i].onmouseover = function() {
links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
}
// What to do on mouse oUt
links[i].onmouseout = function() {
links[i].innerHTML = defaultState;
}
}
}
window.onload = loadImages;
HTML:
<a href="?page=Profile" id="link-1"></a>
<a href="?page=for-sale" id="link-2"></a><br />
<a href="?page=testimonials" id="link-3"></a><br />
<a href="?page=free-home-appraisal" id="link-4" /></a><br />
<a href="?page=contact-me" id="link-5"></a><br />
Share
Improve this question
edited Oct 19, 2012 at 13:11
Stefan
14.9k4 gold badges58 silver badges63 bronze badges
asked Aug 30, 2010 at 14:27
AndreAndre
131 silver badge3 bronze badges
3
- what line does it give you this error ? (use Chrome's developer console or firebug) – Yanick Rochon Commented Aug 30, 2010 at 14:30
- When I do the mousover it give me the error: its plaining about this line: links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />'; – Andre Commented Aug 30, 2010 at 14:32
- It's cleaner to instantiate an empty array using [] instead of "new Array()" – Robusto Commented Aug 30, 2010 at 14:33
3 Answers
Reset to default 6First off, you should be saying:
var links = [];
It's generally discouraged to use the Array
constructor itself, and by not specifying var
, you're making the links
variable reside in the global space, which is generally bad.
Now, as to your actual problem.
Your event handlers are carrying a reference to the path
and i
variables from the outer scope, but by the time they're actually encountered, the variable i
has the value 6
-- not what you intended at all! In order to fix that, you can change:
// What to do on mouseover
links[i].onmouseover = function() {
links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
}
// What to do on mouse oUt
links[i].onmouseout = function() {
links[i].innerHTML = defaultState;
}
to
// What to do on mouseover
links[i].onmouseover = (function(path, i) {
return function () {
links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
};
})(path, i);
// What to do on mouseout
links[i].onmouseout = (function(i) {
return function () {
links[i].innerHTML = defaultState;
}
})(i);
This creates a new closure to hold the variables you want to capture. This way the inner i
can still be, oh, 3
while the outer i
goes to 6.
The problem is that when your onmouseover()
function gets called, your variable i = 6
because your last iteration yielded i = 6
, causing the loop to end. Therefore, you must protect i
somewhere. For example :
function loadImages(){
path = 'uploads/Splash-4/nav/';
var links = [];
for (i=1;i<=5;i++){
(function(j) {
var id = "link-"+j;
var defaultState = '<img src="' +path+j+'.jpg" border="0" />';
links[j] = document.getElementById(id);
// Place all image linksinto anchor
links[j].innerHTML = defaultState;
// What to do on mouseover
links[j].onmouseover = function() {
links[j].innerHTML = '<img src="' +path+j+'a.jpg" border="0" />';
}
// What to do on mouse oUt
links[j].onmouseout = function() {
links[j].innerHTML = defaultState;
}
})(i); // call the anonymous function with i, thus protecting it's value for
// the mouseover/mouseout
}
}
Your code snippet doesn't include a declaration of the variable links. If you haven't defined it elsewhere (i.e., if it's a local variable), you'll need to do it here:
Instead of
links = new Array();
You could do
var links = new Array();
One example can be found here.
If you have declared it elsewhere, it could be that this line
document.getElementById(id);
is returning null.
本文标签: Javascript Array UndefinedStack Overflow
版权声明:本文标题:Javascript Array Undefined - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742125311a2421912.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论