Question

我正在尝试创建一个生成面孔的代码，并将其显示为经过审核的Coursera.com课程的一部分。在函数之外生成的变量我想传递给它，然后得到一些。我的尝试：

var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theImg = document.createElement("img");
theImg.src = "smile.png";    

function generateFaces(numberOfFaces, theLeftSide, theImg) {

        for (i = 0; i < numberOfFaces; i++) {
            var leftPosition = Math.floor(Math.random() * 400);

            var topPosition = Math.floor(Math.random() * 400);

            theImg.style.left = leftPosition + "px";
            theImg.style.top = topPosition + "px";
            theLeftSide.appendChild(theImg.cloneNode());

        };
        var theRightSide = document.getElementById("rightSide");
        var leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        theRightSide.appendChild(leftSideImages.cloneNode(true));
        return leftSideImages;
    }

window.onload = generateFaces;

这感觉不对，因为我没有在

中定义任何变量

window.onload = generateFaces;

接下来，我尝试了一个按钮

<input id="clickMe" type="button" value="clickme" onclick="generateFaces(numberOfFaces, theLeftSide, theImg);" />

向正确的方向推进将不胜感激。如果我在函数中定义变量，代码就有效，这是迄今为止的成就！

Answer 1

我相信您遇到的问题是您在加载页面之前尝试访问dom元素。

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

尝试在你需要它的函数内声明它，因为它无论如何都不在函数之外使用。

var numberOfFaces = 5;
var theImg = document.createElement("img");
theImg.src = "smile.png";    

function generateFaces(numberOfFaces, theLeftSide, theImg) {

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

        for (i = 0; i < numberOfFaces; i++) {
            var leftPosition = Math.floor(Math.random() * 400);

            var topPosition = Math.floor(Math.random() * 400);

            theImg.style.left = leftPosition + "px";
            theImg.style.top = topPosition + "px";
            theLeftSide.appendChild(theImg.cloneNode());

        };
        var theRightSide = document.getElementById("rightSide");
        var leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        theRightSide.appendChild(leftSideImages.cloneNode(true));
        return leftSideImages;
    }

window.onload = generateFaces;

Answer 2

var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theImg = document.createElement("img");
theImg.src = "smile.png";    

function generateFaces() {

        for (i = 0; i < numberOfFaces; i++) {
            var leftPosition = Math.floor(Math.random() * 400);

            var topPosition = Math.floor(Math.random() * 400);

            theImg.style.left = leftPosition + "px";
            theImg.style.top = topPosition + "px";
            theLeftSide.appendChild(theImg.cloneNode());

        };
        var theRightSide = document.getElementById("rightSide");
        var leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        theRightSide.appendChild(leftSideImages.cloneNode(true));
        return leftSideImages;
    }

window.onload = generateFaces();

请勿将var放入您的函数中以将其传递给它。只有你设置它们的方式才能全局定义它们。

如果您希望能够动态生成var，那么您必须将它们放在函数中。

Answer 3

我不确定为什么要在全局级别定义变量（这不是一个好的做法，请记住），只是将它们传递给onload函数中的函数，但是，如果你也可以在其他地方使用这些变量，并希望你的函数与参数一致，并运行onload这些变量作为参数传递，这就是：

var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theImg = document.createElement("img");
theImg.src = "smile.png";    

function generateFaces(numberOfFaces, theLeftSide, theImg) {

        (...)
    }

window.onload = function() {
   generateFaces(numberOfFaces, theLeftSide, theImg);
};

如果这些变量是静态的，并且你在其他地方不需要它们，只需将它们放在函数内：

function generateFaces() {
   var numberOfFaces = 5;
   var theLeftSide = document.getElementById("leftSide");
   var theImg = document.createElement("img");
   theImg.src = "smile.png";
        (...)
    }

window.onload = generateFaces;

将变量传递给/从函数传递

3 个答案: