How can i change the position of an image when page is refreshed in html/javascript?
Question
I need this one image to be in a random position on the screen every time i refresh the page, i found a javascript code that could work but i just don't know how to make it work.
this is my html
<body>
<p>
find rufus
</p>
<img src="molerat.jpg" id="molerat"></img>
</body>
javascript:
console.log();
function onloadFunction() {
var amount = 10;
var arrayIDs = "molerat";
for (i=1;i<=amount;i++) {
var element = document.getElementById(arrayIDs[i-1]);
var positionInfo = element.getBoundingClientRect();
var imgHeight = positionInfo.height;
var imgWidth = positionInfo.width;
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var imgLeft = Math.floor(Math.random() * (screenWidth - imgWidth));
var imgTop= Math.floor(Math.random() * (screenHeight - imgHeight));
document.getElementById(arrayIDs[i-1]).style.top = imgTop+"px";
document.getElementById(arrayIDs[i-1]).style.left = imgLeft+"px";
}
}
css:
body{
background-color:white;
font-family: monospace;
font-size: 50px;
}
img {
position: absolute;
}
2 answers
solution1
0 ACCPTED 2020-09-16 08:51:15
arrayIDs is not an array.
var arrayIDs = "molerat"; needs to be var arrayIDs = ["molerat"];
Also you only have 1 image so the amount needs to be set to 1
function onloadFunction() { var amount = 1; var arrayIDs = ["molerat"]; for (i=1;i<=amount;i++) { var element = document.getElementById(arrayIDs[i-1]); var positionInfo = element.getBoundingClientRect(); var imgHeight = positionInfo.height; var imgWidth = positionInfo.width; var screenWidth = window.innerWidth; var screenHeight = window.innerHeight; var imgLeft = Math.floor(Math.random() * (screenWidth - imgWidth)); var imgTop= Math.floor(Math.random() * (screenHeight - imgHeight)); document.getElementById(arrayIDs[i-1]).style.top = imgTop+"px"; document.getElementById(arrayIDs[i-1]).style.left = imgLeft+"px"; } } onloadFunction();
body{ background-color: white; font-family: monospace; font-size: 50px; } img { position: absolute; }
<p> find rufus </p> <img src="https://picsum.photos/200" id="molerat" />
solution2
0 2020-09-16 09:21:56
Your onloadFunction needs to be invoked, when the page loads. If you're using jQuery in your project, then $(document).ready(...) is the way to go:
$(onloadFunction)
Otherwise you might want to check this question for pure JavaScript $(document).ready(...) alternatives.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.