Nov 18, 2022

# Solution 1 :

welcome to StackOverflow.
There are a number of ways to accomplish this. You could set the `style` of your `target` element on click and use the `transform` property you’re already using above to set the position of the target. For example:

``````      function getRandomInt(max) {
return Math.floor(Math.random() * max);
}

function targetClicked() {
const randX = getRandomInt(100);
const randY = getRandomInt(100);
document.getElementById("target").style.transform = `translate(\${randX}%, \${randY}%)`;
}
``````

If you’d like to know more you may want to look at all the different ways position can be set via CSS. Hopefully this gets you off the ground though.

# Solution 2 :

Hello justinMonserrat,
I hope this will help you to solve the problem, By this you can move the image any where inside the parent element.

``````function randomAxis(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const img = document.getElementById("gameboard_target");
const gameboard = document.getElementById("gameboard").getBoundingClientRect();
const img_credentials = img.getBoundingClientRect();
const g_width = gameboard.width-img_credentials.width;
const g_height = gameboard.height-img_credentials.height;
img.onclick = function(){
const y_axis = randomAxis(0,g_width);
const x_axis = randomAxis(0,g_height);
this.style.cssText = `transform:translate(\${x_axis}px,\${y_axis}px)`
};``````
``````#gameboard{
border:2px solid;
width:300px;
height:300px;
background-color: darkgray;
}
#gameboard img{
width:30px;
height:30px;
transition: transform .5s cubic-bezier(.22,.61,.36,1);
cursor:pointer;
}

#gameboard img:active{
box-shadow: 0px 0px 13px 3px #ecebeb;
}``````
`````` <div id="gameboard">
<img id="gameboard_target" src="https://justinmonserrat.github.io/target-practice/target.png" />
</div>``````

# Solution 3 :

The input type was not button, it is a image. You want to move the image?

# Problem :

I am making a basic aim trainer game. I have a gameboard which is just a div with a range and a target icon which is really just a button. I want the button to move inside the range every time it is clicked.

this is my code for the gameboard and target

``````function targetClicked() {
score++;
document.getElementById("scoreLabel").innerHTML = score;

moveTarget();
}

function moveTarget() {

}``````
``````#gameboard {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;

width: 500px;
height: 500px;
background-color: darkgray;

}

#target {
width: 75px;
height: 75px;

position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 50%);
}``````
``````<div id="gameboard">
<input hidden type="image" src="target.png" id="target" onclick="targetClicked()">
</div>``````

everything else such as the countdown timer and score counter work. (not shown here) I even got the gameboard and everything to dissapear when the counter reaches 0, but I don’t actually know how to move the target everytime it is clicked.

Can I used something like this and inside the moveTarget function adjust the property of the buttons location?

Is there a better way to go about it or can I simply make the button move its position when its clicked?

### Comment posted by phasma

Np, good luck with your project!

### Comment posted by justinMonserrat

Omg I didn’t realize that, but yes I want to move the image

### Comment posted by justinmonserrat.github.io/target-practice

justinmonserrat.github.io/target-practice