Changing the coordinates of the item after the click

Question

function handler() { var left = myDIV.getBoundingClientRect(); var top = myDIV.getBoundingClientRect(); if (left = 100){ left.style.left = (parseInt(left.style.left||0)+100)+"px"; } if(top = 100){ top.style.top = (parseInt(top.style.left||0)+100)+"px"; } if (left = 200) left.style.left = (parseInt(left.style.left||0)-100)+"px"; } if(top = 200){ top.style.top = (parseInt(top.style.left||0)-100)+"px"; }

tell me the direction for the function to work

Agree missing after adding gives error Cannot read property 'left' of undefined
you are trying to take the left.style.left property, in this case left.style is undefined and it does not have the left property.
This property is only for the DOM element (myDIV in your cases)

PavelGorobtsov PavelGorobtsov 406 2 silver marks 7 bronze marks · Accepted Answer · 2016-09-28T13:16:40

myDIV.getBoundingClientRect(); returns an object of the form {left: 100, right: 100, ...} , i.e. in the variable left and right you put the object. In this case, further in the code, you are reassigning, rather than checking.

Perhaps something like this was originally conceived (it is not clear from the task):

 function handler() { var bounds = myDIV.getBoundingClientRect(); if (bounds.left === 100){ myDIV.style.left = (parseInt(myDIV.style.left||0)+100)+"px"; } if(bounds.top === 100){ myDIV.style.top = (parseInt(myDIV.style.top||0)+100)+"px"; } if (bounds.left === 200){ myDIV.style.left = (parseInt(myDIV.style.left||0)-100)+"px"; } if(bounds.top === 200){ myDIV.style.top = (parseInt(myDIV.style.top||0)-100)+"px"; } }

<div id = "myDIV" onclick = "handler ()"> <h1> myDIV </ h1> </ div> there is a div to it before moving after the click
Perhaps this example solves your problem jsfiddle.net/5z35ywad
Not necessarily, you can use the offsetTop and offsetLeft properties, example jsfiddle.net/5z35ywad/1

Changing the coordinates of the item after the click

1 answer 1

More articles: