변수 전달/전달 함수

Question

얼굴을 생성하고 감사 한 Coursera.com 과정의 일부로 표시하는 코드를 생성하려고합니다. 함수 밖에서 생성 된 변수가 있는데,이 함수에 전달하고자하는 변수가 있습니다. 내 시도 : 나는

window.onload = generateFaces; 

다음에 어떤 변수를 정의하지 않은 것처럼

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; 

이 잘 느끼지 않았다, 나는 버튼

<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 함수의 함수에 전달하기 만하면됩니다. 이 변수가 아니라 정적 인 경우

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

, 당신은 단지 그들을 넣고, 다른 곳에서 그들을 필요로하지 않는다 : 다른 곳에서, 그리고 기능은 매개 변수, 그리고 매개 변수로 전달이 변수 onload을 실행하려면, 그것은 방법 함수 내부 :

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

window.onload = generateFaces;