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

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.