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); = `transform:translate(${x_axis}px,${y_axis}px)`
    border:2px solid;
    background-color: darkgray;
#gameboard img{
    border-radius: 50%;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);

#gameboard img:active{
    box-shadow: 0px 0px 13px 3px #ecebeb;
 <div id="gameboard">
        <img id="gameboard_target" src="" />

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() {
    document.getElementById("scoreLabel").innerHTML = score;


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()">

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