JavaScript

msdsmd sm,dfsadf
PLUS
msdsmd sm,dfsadf
Courses Plus Student 1,013 Points

These are five line of JS code and very simple to read.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{margin:0;}
@keyframes move{
0%{
height:0;width:0;
}
100%{
height:30px;
width:30px;
}
}
</style>
</head>
<body>
<div style="height:100px;width:100px;position:relative;background:red;">
<span style="height:30px;width:30px;position:absolute;transform:translate(-50%,-50%);animation:6s move infinite;background:blue;">
</div>
<script>
const div = document.querySelector('div')
div.addEventListener('click',function(e){

const child = document.querySelector('span')
child.style.top=e.clientY     - e.target.offsetTop + 'px'
child.style.left=e.clientX   - e.target.offsetLeft + 'px'
})
/*I  do not know why this happens when
 I click the div at the bottom right twice at the
 same location, and the second time I  click the div, 
the span tag move to the top left.
*/


/*If I remove the e.target.offsetTop and left, that will 
not happen, but I want to know why adding e.target.offsetTop 
   and left  make unwanted change.
*/
</script>
</body>
</html>

3 Answers

Brandon White
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Treehouse Moderator

Hi msdsmd sm,dfsadf,

The reason why clicking the span box twice in the same location results in the span box moving to the top left corner is because e.clientY and e.target.offsetTop are the same (so they zero out), and e.clientX and e.target.offsetLeft are the same (and so they, too, zero out). And so you're left with the top as 0, and the left as 0.

What you could do to keep this from happening would be to add a conditional statement. Before running the code that changes the positioning of the span element:

script.js
child.style.top=e.clientY     - e.target.offsetTop + 'px'
child.style.left=e.clientX   - e.target.offsetLeft + 'px'

you could test that the e.clientY is not equal to e.target.offsetTop AND that e.clientX is not equal to e.target.offsetLeft.

I altered your code using that exact condition on my local machine, and I'll feel confident in saying that your code worked for me as you intended.

Hope that helps.

Keep it up, Coder!

msdsmd sm,dfsadf
PLUS
msdsmd sm,dfsadf
Courses Plus Student 1,013 Points

I do not understand why I get zero when I click on a different location? console.log(e.target.offsetLeft) return 0 when I click on different location.
I think offsetLeft and clients should have the same number because the offsetLeft is how much away from the left corner, and it is the same as clientX. Why do I get a number greater than 0 when I clicked span tag, but when I click outside span tag, I get 0.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{margin:0;}
@keyframes move{
0%{
height:0;width:0;
}
100%{
height:30px;
width:30px;
}
}
</style>
</head>
<body>
<div style="height:100px;width:100px;position:relative;background:red;">
<span style="height:30px;width:30px;position:absolute;
transform:translate(-50%,-50%);animation:6s move infinite;background:blue;">
</div>
<script>
const div = document.querySelector('div')
div.addEventListener('click',function(e){

const child = document.querySelector('span')
child.style.top=e.clientY   + 'px'
child.style.left=e.clientX   + 'px'
console.log(e.target.offsetLeft)
})



</script>
</body>
</html>
<!--
Thanks
-->