Position image randomly after each onclick event (image must be in div tag)-CodePudding

So I am very new (as I am sure my code shows :P) and I must create code that contains an image in a div tag. It must be this way. Once the document is opened the image(div) is to be displayed at a random position. Each time the image(div) is clicked, the image alone moves to another random position. It does not replicate itself. Just moves. I have had other "better" attempts but with all my editing and changing all I get is the image in the top left corner.

I tried numerous things that all failed to work. Obviously failed because the code was terrible. I have tried a variation of onclick events etc...I know many errors are visible. This is not one of those instances where I believe the logic is sound and it should work. This is a "what am I at" instance

  <script>

        function fpos () {

                var img = document.getElementById('myImage') //is this needed at all? 

                var x = Math.floor(Math.random()*600);      
                var y = Math.floor(Math.random()*600);
                var z = Math.floor(Math.random()*600);

                 
        }
            
            function rmove() {    

                img.style.top = x   'px';                   
                img.style.left = y   'px';
                
                
        }
             
        
    </script>

</head>

<body onl oad="fpos"> 
    <div style = position:absolute; onclick="rmove" >
        <img id="myImage" src='images/iasip.jpeg'> </img>
    </div>
</body>

CodePudding user response：

So, first, don't take this the wrong way my man but you gotta post some code to show us what you're working with. Makes all the difference for troubleshooting.

That said, you're gonna need to do with with JS. First target the image element. Can use querySelector to hit either the class or id or just getElementById.

Then add an event listener to render it at a random coordinate. Like this.

    <div id="imageContainer">
      <img src="your-image-source" alt="your-image-description">
    </div>
    
    <script>
      // get the image container element
      var imageContainer = document.getElementById("imageContainer");
      
      // set the initial random position for the image container
      imageContainer.style.left = Math.floor(Math.random() * window.innerWidth)   "px";
      imageContainer.style.top = Math.floor(Math.random() * window.innerHeight)   "px";
      
      // when the image container is clicked, set a new random position
      imageContainer.addEventListener("click", function() {
        imageContainer.style.left = Math.floor(Math.random() * window.innerWidth)   "px";
        imageContainer.style.top = Math.floor(Math.random() * window.innerHeight)   "px";
      });
    </script>

Can either do that inline like in the example or add it to your script file.

CodePudding user response：

Don't worry, try to isolate some code so we can review it.

Once the document is opened the image(div) is to be displayed at a random position.

By inspecting an element's properties with Right Click > Inspect > Property you'll find all javascript properties that you have access to once you select the element with a selector (document.querySelector for example)

Try something with that, i think that the easiest way is to use element.style.transform = "translate(x,y)" like x.style.transform = "translate(10px, 20px)";

CodePudding user response：

Here is a working example I just threw together.

Basically you need to create a function that moves the image each time by calculating a random number for the height and width and then multiplying by the size of the window so that number can span the full width/length of the screen.

Then you can add 'px' to the end of the calculation to use pixels as the unit and set that to the left and top properties of the image to move it that far from the left and top of the screen using absolute position (coordinates).

window.onload = function() {
  move()
}

function move() {
  let img = document.getElementById('logo')
  img.style.left = Math.floor(Math.random() * window.innerWidth)   "px"
  img.style.top = Math.floor(Math.random() * window.innerHeight)   "px"
}

#logo {
  height: 100px;
  position: absolute;
}

<div>
  <img onclick='move()' id='logo' src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/2048px-LEGO_logo.svg.png' />
</div>