関数との間で変数を渡す

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;