当我将变量放在函数中并且在它停留在函数之前没有时，为什么编程工作？

Question

这是我的代码，直到我放

才行

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

功能内部。在我把它放在那里之前，这条线位于函数上方 - 因此代码没有工作

这是我的代码（修改）

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);
    }   
}

现在效果很好。

你能解释一下为什么它现在有用吗？为什么它没有工作（它在页面下载时没有显示图像）当它被写入时（唯一的区别是使用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);
    }   
}