I am attempting to create a code that generates faces and displays them as part of an audited Coursera.com course. There are variables generated outside of the function that I would like to pass into it, and then get some out. My attempt:
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;
This didn't feel right as I wasn't defining any variables in the
window.onload = generateFaces;
Next, I tried a button
<input id="clickMe" type="button" value="clickme" onclick="generateFaces(numberOfFaces, theLeftSide, theImg);" />
A push in the right direction would be appreciated. The code works if I define the variables in the function, which is an accomplishment so far!