Why does the programming work when I place the variable inside the function and doesn`t when it stays before it?

Question

Here's my code that didn't work till I put

var theLeftSide = document.getElementById("leftSide");

Inside the function. Before I placed it there the line was above the function - and as a result the code didn`t work

here`s my code (amended)

function generate_faces() {
    var theLeftSide = document.getElementById("leftSide");
    for (number_of_faces = 0; number_of_faces < 5; number_of_faces++) {
        newFace = document.createElement("img");
        newFace.setAttribute("src",
            "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"
        );
        theLeftSide.appendChild(newFace);
    }   
}

And it works nicely now.

Can you please explain me why it works now and why it didn`t work (it showed no images when the page downloaded) when it was written so (the only difference is the placement of the line with var theLeftSide:

var theLeftSide = document.getElementById("leftSide");
function generate_faces() {
        for (number_of_faces = 0; number_of_faces < 5; number_of_faces++) {
        newFace = document.createElement("img");
        newFace.setAttribute("src",
            "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"
        );
        theLeftSide.appendChild(newFace);
    }   
}