CODEWITHSUNDEEP
javascripthtmlcssdom
Cham
Cham

Reputation: 131

Appending mutiple image on a div

I am trying to add the same image on a div five times but when I open my web page in Chrome or any browser it only shows one smiley.png image when it supposed to show five smiley.png on different coordinates on a the leftSide div. I am not sure what is the problem with my code below: 

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Web Practice 2</title>
    	<style type="text/css">
    		img {
    			position: absolute;
    		}
    		div {
    			width: 500px;
    			height: 500px;
    			position: absolute;
    		}
    		#rightSide {
    			left: 500px;
    			border-left: 1px solid black;
    		}
    	</style>
    </head>
    <body>
    	<div id="leftSide"></div>
    	<div id="rightSide"></div>
    	<script type="text/javascript">
    		var numberOfFaces = 5;
    		var theLeftSide = document.getElementById("leftSide");
    
    		function generate() {
    			for (i = 0; i < numberOfFaces; i++) {
    				var img = document.createElement("img");
    				img.setAttribute("src", "smile.png");
    				img.style.top = Math.floor(Math.random()*450);
    				img.style.left = Math.floor(Math.random()*450);
    				theLeftSide.appendChild(img);
    			}
    		}
    
    		window.onload = generate();
    
    	</script>
    </body>
    </html>

Upvotes: 1

Views: 55

Answers (4)

gyre
gyre

Reputation: 16779

There actually are five images, but it only appears like there is one because your position randomization is not working correctly (in other words, the images are all being stacked on top of each other). The CSS top and left attributes require units, so you should append "px" to both.

Also, note that since the necessary DOM has already loaded by the time your script begins executing, you don't need to use window.onload at all.

Lastly, you might be pleased to know that you can use the shortcut img.src = ... instead of calling img.setAttribute("src", ...) in your script.

Demo Snippet:

<!DOCTYPE html>
<html>

<head>
  <title>Web Practice 2</title>
  <style type="text/css">
    img {
      position: absolute;
    }
    
    div {
      width: 500px;
      height: 500px;
      position: absolute;
    }
    
    #rightSide {
      left: 500px;
      border-left: 1px solid black;
    }
  </style>
</head>

<body>
  <div id="leftSide"></div>
  <div id="rightSide"></div>
  <script type="text/javascript">
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");

    function generate() {
      for (i = 0; i < numberOfFaces; i++) {
        var img = document.createElement("img");
        img.src = "smile.png";
        img.alt = "Smile!"
        img.style.top = Math.floor(Math.random() * 450) + "px";
        img.style.left = Math.floor(Math.random() * 450) + "px";
        theLeftSide.appendChild(img);
      }
    }

    generate();
  </script>
</body>

</html>

Upvotes: 3

Scott Marcus
Scott Marcus

Reputation: 65808

You forgot to add units of measure ("px" for pixels) to the coordinates. Without units specified, the property values are invalid.

Also, you are calling generate immediately, rather than referring to the function.

I have modified your sizes to fit better in the stack overflow snippet space and also used the more correct .addEventListener method for setting up your load event handler. Also, I have added a temporary background color to the div elements to better see the layout of the pictures in the leftSide element.

    		var numberOfFaces = 5;
    		var theLeftSide = document.getElementById("leftSide");
    
    		function generate() {
    			for (i = 0; i < numberOfFaces; i++) {
    				var img = document.createElement("img");
    				img.setAttribute("src", "smile.png");
    				img.style.top = Math.floor(Math.random()*250) + "px";
    				img.style.left = Math.floor(Math.random()*250) + "px";
    				theLeftSide.appendChild(img);
    			}
    		}
    
    		window.addEventListener("load", generate);
    		img {
    			position: absolute;
    		}
    		div {
    			width: 300px;
    			height: 300px;
    			position: absolute;
          background-color:#ff0;
    		}
    		#rightSide {
    			left: 350px;
    			border-left: 1px solid black;
    		}
    	<div id="leftSide"></div>
    	<div id="rightSide"></div>

Upvotes: 1

haim770
haim770

Reputation: 49095

There are 2 problems in your code:

  1. You need to assign a function reference to window.onload. When you're using generate(), you're invoking the function and since it doesn't return anything you're effectively doing window.onload = undefined.

  2. You're assigning theLeftSide before the DOM is ready, hence it will always be null and will throw upon your appendChild() calls.

Try this instead:

  var numberOfFaces = 5;

  function generate() {
    var theLeftSide = document.getElementById("leftSide");

    for (i = 0; i < numberOfFaces; i++) {
      var img = document.createElement("img");
      img.setAttribute("src", "smile.png");
      img.style.top = Math.floor(Math.random() * 450);
      img.style.left = Math.floor(Math.random() * 450);
      theLeftSide.appendChild(img);
    }
  }

  window.onload = generate;

See Fiddle

Upvotes: 1

Cham
Cham

Reputation: 131

I have resolved my issue, I just changed <!DOCTYPE html> to <html> and it worked but I am not sure why though.

Upvotes: 0

Related Questions