Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
msdsmd sm,dfsadf
1,124 PointsThese 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
Full Stack JavaScript Techdegree Graduate 34,660 PointsHi 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:
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
1,124 PointsI 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
-->
msdsmd sm,dfsadf
1,124 PointsJust ignore this post.