object is undefined, don't know why

Question

I'm getting an an error "TypeError: Cannot read property 'style' of undefined" I'd be glad if you could help me debug it:

var TWITTER = '"twitter"';
var FECEBOOK = '"facebook"';
var FACEBOOKicon = "https://s-static.ak.facebook.com/rsrc.php/yi/r/q9U99v3_saj.ico";
var TWITTERicon = "https://twitter.com/phoenix/favicon.ico";

var tweetlinks;
tweetlinks = document.querySelectorAll('[href*=' + TWITTER + ']');
var facelinks;
facelinks = document.querySelectorAll('[href*=' + FECEBOOK + ']');

function getLinks() {
    for (var i = 0; i <= tweetlinks.length; i++) {
        setBackground(tweetlinks[i], TWITTERicon);
    }

    for (var g = 0; i <= facelinks.length; g++) {
        setBackground(facelinks[g], FACEBOOKicon);
    }    

    function setBackground(elment, backimage) {
        elment.style.backgroundImage = backimage;
    }
}

getLinks();

Answer 1

Change:

i <= tweetlinks.length

To:

i < tweetlinks.length

Your loops are going beyond the arrays, resulting in an undefined value in the last iterations. Array indices range from 0 to length - 1, and not 0 to length.

Answer 2

There are various bugs in your code. First: you don't want to loop from 0 to <= .length but to < .length. Second, in the second loop you use g as a counter variable, but compare to i.

Answer 3

There are mismatched loop variables in your code. You should write:

for (var g = 0; g < facelinks.length; g++) {
    setBackground(facelinks[g], FACEBOOKicon);
}

Instead of:

for (var g = 0; i <= facelinks.length; g++) {
    setBackground(facelinks[g], FACEBOOKicon);
}

Also, all the comparisons to length in your for loops should be strictly less than ( < ) instead of less than or equal to ( <= ), since array indexes are zero-based.

Answer 4

Ates and Frederic both posted problems in the code. You'll need to see to both for your code to work:

var TWITTER = '"twitter"';
var FECEBOOK = '"facebook"';
var FACEBOOKicon = "https://s-static.ak.facebook.com/rsrc.php/yi/r/q9U99v3_saj.ico";
var TWITTERicon = "https://twitter.com/phoenix/favicon.ico";

var tweetlinks;
tweetlinks = document.querySelectorAll('[href*=' + TWITTER + ']');
var facelinks;
facelinks = document.querySelectorAll('[href*=' + FECEBOOK + ']');

function getLinks() {
    for (var i = 0; i < tweetlinks.length; i++) {
        setBackground(tweetlinks[i], TWITTERicon);
    }

    for (var g = 0; g < facelinks.length; g++) {
        setBackground(facelinks[g], FACEBOOKicon);
    }    

    function setBackground(elment, backimage) {
        elment.style.backgroundImage = backimage;
    }
}

getLinks();

The reason you use i < arr.length instead of i <= arr.length is because arrays are indexed at zero, meaning that the first element is at index 0, even though we call it the first element. If we have an array ['a', 'b', 'c'] , it has three elements, but the third element is at index 2.

Answer 5

There is a typing mistake. instead of "elment", it should be "element".

Answer 6

Well, have you checked what is it you are really getting in variables: tweetlinks and facelinks?

It appears to me that you are setting the "style" property of an "undefined" object. Perhaps you are not getting what you are expecting in those arrays.

Answer 7

It looks like in your setBackground function, elment is undefined or null or nothing as they say. This can be because you are going over the index via your for loop. Change:

i <= facelinks.length

To:

i < facelinks.length