CODEWITHSUNDEEP
javascripthtmlcss
user2185573
user2185573

Reputation:

I wish to generate multiple images randomly sprinkled on a region in a web browser

This is the first time I am trying some non-trivial dom manipulation in javascript. I am basically partitioning my screen into two halves and randomly inserting five img elements in the left partition.

Here is my code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Faces on the left</title>

    <style>
        img {
            position: absolute;
        }

        div {
            position: absolute;
            width: 500px;
            height: 500px;
        }

        #rightSide {
            left: 500px;
            border-left: 1px solid black;
        }

    </style>
</head>
<body onload="generateFaces()">

    <h2>Matching game</h2>
    <p>Click on the extra smiling face on the left</p>

    <div id="leftSide"></div>

    <div id="rightSide"></div>

    <script>
        function generateFaces() {

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

            for (var i = 0; i < numberOfFaces; i++) {
                var img = document.createElement("img");
                img.src = "../smile.png";
                var topLoc = Math.floor(Math.random() * 400);
                var botLoc = Math.floor(Math.random() * 400);
                img.style.top = topLoc;
                img.style.bottom = botLoc;
                theLeftSide.appendChild(img);
            }
        }

    </script>
</body>
</html>

The picture i wish to generate is :-

Expected output

The picture i get when i load the page is :-

Observed output

Its as if the loop does not matter. No matter what value of numberOfFaces I put, the observed img is exactly one face. I debugged the thing, no console errors in Javascript in webstorm and the loop executes 5 times. Is this some weird scoping error in javascript, please help. Its something very silly but I cant pinpoint it.

Upvotes: 0

Views: 58

Answers (1)

recursive
recursive

Reputation: 86064

You're very close. You just need a couple of changes. First, you need to use units for css positions. In this case, you should use px. Also, you should set top and left instead of top and bottom. See below.

function generateFaces() {

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

  for (var i = 0; i < numberOfFaces; i++) {
    var img = document.createElement("img");
    img.src = "../smile.png";
    var topLoc = Math.floor(Math.random() * 400);
    var botLoc = Math.floor(Math.random() * 400);
    
    // changes are here!
    img.style.top = topLoc + "px";  // added px
    img.style.left = botLoc + "px"; // and used "left" instead of "bottom"
    theLeftSide.appendChild(img);
  }
}
generateFaces();
img {
  position: absolute;
}

div {
  position: absolute;
  width: 500px;
  height: 500px;
}

#rightSide {
  left: 500px;
  border-left: 1px solid black;
}
    <h2>Matching game</h2>
    <p>Click on the extra smiling face on the left</p>

    <div id="leftSide"></div>

    <div id="rightSide"></div>

    <script>

    </script>

Upvotes: 1

Related Questions