將變量傳遞給函數

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;