Adding an image multiple times in JavaScript

Question

I am stuck in an exercise for a MOOC. The instructions are the following: "In this function the faces are created in a loop. The loop executes numberOfFaces times. In each iteration"

Five faces are supposed to show on the left side. However, I'm only getting one.

Below you can find my code. Please tell me what I'm doing wrong/how to fix it.

<html>
<head>
    <title>Matching Game</title>
    <style>
        img {position: absolute}
        div {width: 500px; height: 500px; position: absolute}
        #rightSide {left: 500px; border-left: 1px solid black}
    </style>
</head>
    <body id = "theBody" onload = "generateFaces()">
        <h1 id = "title">Matching Game</h1>
        <p id = "instructions"><b>Intructions:</b><br>
        Click on the extra smiling face on the left.
        Watch out though! If you click on the wrong place, it will be "Game Over"!</p>
        
        <div id = "leftSide"></div>
        <div id = "rightSide"></div>
        
        <script>
        var numberOfFaces = 5;
        var theLeftSide = document.getElementById("leftSide");

        function generateFaces() {
            for(i = 0; i < numberOfFaces; i++) {
                var smilies = document.createElement("img");
                smilies.src = "https://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
                
                var top_position = Math.random() * 400;
                top_position = Math.floor(top_position);
                var left_position = Math.random() * 400;
                left_position = Math.floor(left_position);
                
                theLeftSide.style.top = top_position + "px";
                theLeftSide.style.left = left_position + "px";
                theLeftSide.appendChild(smilies);
            }
            
        }
        
        </script>
    </body>
</html>

Cheers, J

Please copy the code into your question, not a picture of your code. Take a look at minimal reproducible example for information about how to include the appropriate amount of code in a question. — Heretic Monkey
– Heretic Monkey, Commented Jan 29, 2016 at 18:22
Please post your code as part of the question (instead of an image of your code). — Brett DeWoody
– Brett DeWoody, Commented Jan 29, 2016 at 18:22
The code works for me. You must be doing something wrong somewhere else. — lleaff
– lleaff, Commented Jan 29, 2016 at 18:27

oKonyk · Accepted Answer · 2016-01-29 19:27:43Z

2

Here is working Plunker

Your code snippet is good. This is complete thing:

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


     <script>
        var numberOfFaces = 5;
        var theLeftSide = document.getElementById("leftSide");
        generateFaces()
        function generateFaces() { // I need to fix this function. Something is wrong.
          for(i = 0; i < numberOfFaces; i++) {
            var smilies = document.createElement("img");
            smilies.src = "https://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

            var top_position = Math.random() * 400;
            top_position = Math.floor(top_position);
            var left_position = Math.random() * 400;
            left_position = Math.floor(left_position);

            theLeftSide.style.top = top_position + "px";
            theLeftSide.style.left = left_position + "px";
            theLeftSide.appendChild(smilies);
          }
        }
     </script>
   </body>
 </html>

EDIT: actual problem discovered :)

Author was applying div, img {position: absolute} style, and signing top, left values to while outer <div>, instead of each <img>.

This fixes issue:

smilies.style.top = top_position + "px";
smilies.style.left = left_position + "px";

Final Plunk

edited Jan 29, 2016 at 19:27

answered Jan 29, 2016 at 18:34

oKonyk

1,47611 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CoconutBread Over a year ago

Thanks. It looks like I'm doing something wrong elsewhere then.

oKonyk Over a year ago

Do you have any CSS applied to leftSide element. Maybe elements are there, but they just overlapping each other?

oKonyk Over a year ago

smilies.style.top = top_position + "px"; smilies.style.left = left_position + "px"; - this is your actual problem. Check this plunker: plnkr.co/edit/NugZ2E6kTY3i3fGcIi8I?p=preview You were giving random position to <div>, not to <img> P.S. upvote if it helped :)

Collectives™ on Stack Overflow

Adding an image multiple times in JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related