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 ??
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>Use this method.
let robot = document.querySelector('.robot');
document.addEventListener('mousedown' , function (event){
let y = event.pageY + 'px';
let x = event.pageX + 'px';
robot.setAttribute('style', `top: ${y}; left: ${x}`);
console.log(`Position Updated, top: ${y}; left: ${x}`)
});.robot{
background-color: rgb(10, 0, 143);
height:120px;
width:120px;
border-radius:15px;
position: relative;
}<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>https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft
clientTop and clientLeft are read only properties