Search code examples
javascripthtmlimagerefresh

How can i change the position of an image when page is refreshed in html/javascript?


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;
}

Solution

  • 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" />