object moving with javascript

Issue

i want to move my "robot" div where i clicked , so i wrote a javascript code :

document.addEventListener('mousedown', function(event) {
  let robot = document.querySelector('.robot');
  robot.clientTop = event.pageX + 'px';
  robot.clientLeft = event.pageY + 'px';
});

.robot {
  background-color: rgb(10, 0, 143);
  height: 120px;
  width: 120px;
  border-radius: 15px;
  margin: 25px auto;
}

<div class="robot">
  <span class="eyes_left">
    
                </span>
  <span class="eyes_right">
    
                </span>
  <div class="hands">

  </div>
  <div class="battery">
    <div class="charge">

    </div>
    <div class="charge">

    </div>
    <div class="charge">

    </div>
    <div class="charge">

    </div>

  </div>
</div>

but it doesn't work and don't say any errors whats the problem ??

Solution

Unfortunatly you cannot set the clientTop in the way you have tried. You need to use css to adjust the position. Give the element position: absolute and then update the top and left position in the javascript.

document.addEventListener('mousedown', function(event) {
  let robot = document.querySelector('.robot');
  robot.style.top = event.pageY + 'px';
  robot.style.left = event.pageX + 'px';
});

.robot {
  background-color: rgb(10, 0, 143);
  height: 120px;
  width: 120px;
  border-radius: 15px;
  margin: 25px auto;
  position: absolute;
}

<div class="robot">
  <span class="eyes_left">
    
                </span>
  <span class="eyes_right">
    
                </span>
  <div class="hands">

  </div>
  <div class="battery">
    <div class="charge">

    </div>
    <div class="charge">

    </div>
    <div class="charge">

    </div>
    <div class="charge">

    </div>

  </div>
</div>

Answered By - spirift