javascript - create image element and randomly place within div in html5

Question

In my html document I have a div with id="containerRight". In the same directory where the html document is I have an image that needs to be added to the html. Using javascript I want to add 5x the same image into the div and scatter them randomly within the div. I'm struggling with adding 5x the same image from the hdd and positioning them randomly within the div. I have tried this so far:

<!DOCTYPE html>
<html>
<head>
<script>

function insert_picture(){
var newPicture = document.createElement("img");
var destinationParent = document.getElementByID("containerRight");
destinationParent.appendChild(newPicture);
}

function ImgRandomPosition()
{
    var left = generateRandom();
    var top = generateRandom();
var image = insert_picture();
var imagestyle = document.getElementById("imgRight").style;
imagestyle.position = "absolute";
imagestyle.top = top;
imagestyle.left = left;
}

</script>
</head>

<body onclick="insert_picture()">
<div id="containerRight">
<img id="imgRight" src="smiley.png" alt="" />
</div>

</body>
</html>

first of all, don't you absolute if you want to position it relative to the containerRight. Second, show us your generateRandom method. Why are you creating a new image when one is already available? If not why not set the source of that image? — gurvinder372
– gurvinder372, Commented Feb 4, 2016 at 10:47
my generateRandom as follows: function generateRandom() { var numr = Math.floor((Math.random() * 400) + 1); var random = numr+"px";} yes the image is available, i guess i didnt know how to set the source of that image in my JS..any toughts? — whada
– whada, Commented Feb 4, 2016 at 11:21
@gurvinder372: “first of all, don't you absolute if you want to position it relative to the containerRight” – of course absolute positioning is the way to go here; relative would only position the images in regard to the position they would have in normal flow. Absolute positioning is relative to the next ancestor element that has a position different from the default static. — C3roe
– C3roe, Commented Feb 4, 2016 at 11:30

whada · Accepted Answer · 2016-02-04 15:11:06Z

I have changed the code to the following and it adds images to the div containerRight next to each other:

function insert()
{
    var imgDestination = document.getElementById("containerRight");
    var imgAdded = document.createElement("img");
    imgAdded.src = "smiley.png";
    imgDestination.appendChild(imgAdded);
}

Then the next issue is to position images randomly within the same div id="containerRight". The code below does add images randomly to the body of the html not the div. Any further thoughts greatly appreciated:

function insert()
{
    var imgDestination = document.getElementById("containerRight");
    var imgAdded = document.createElement("img");
    imgAdded.src = "smiley.png";
    imgDestination.appendChild(imgAdded);
    ImgRandomPosition(imgAdded);
}


function ImgRandomPosition(imgAdded)
{
    var left = Math.floor((Math.random() * 400) + 1)+"px";
    var top = Math.floor((Math.random() * 400) + 1)+"px";
    var imagestyle = imgAdded.style;
    imagestyle.position = "absolute";
    imagestyle.top = top;
    imagestyle.left = left;
}

gurvinder372 · Accepted Answer · 2016-02-04 11:32:12Z

0

change your code to

function insert_picture()
{
   var newPicture = document.createElement("img"); 
   var destinationParent = document.getElementByID("containerRight");
   destinationParent.appendChild(newPicture);
   newPicture.src = "smiley.png";
   ImgRandomPosition(newPicture);
}

function ImgRandomPosition(imgObj)
{
    var left = generateRandom();
    var top = generateRandom();
    var imagestyle = imgObj.style;
    imagestyle.position = "absolute";
    imagestyle.top = top;
    imagestyle.left = left;
}

Now when you click on the body <body onclick="insert_picture()"> this method will add an image somewhere on the body

edited Feb 4, 2016 at 11:32

answered Feb 4, 2016 at 11:26

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

2 Comments

whada Over a year ago

thanks, still doesnt run as expected though. I have removed generateRandom() method and replaced left and top variables as follows: var left = Math.floor((Math.random() * 400) + 1)+"px"; var top = Math.floor((Math.random() * 400) + 1)+"px"; the code still doesn't add the pic to the html doc...any further thoughts?

whada Over a year ago

see the answer below that partially works. the second code below adds the images to the body not the div...any ideas how to keep adding images randomly within the div id="containerRight" ?

Collectives™ on Stack Overflow

javascript - create image element and randomly place within div in html5

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related