I am attempting to create an interactive feature where a ball moves to the location where the mouse is clicked. Although the X and Y coordinates are being logged successfully, the ball itself is not moving. Can anyone help me identify what I might be overlooking?
This code snippet pertains to a Typescript React component.
const PlayArea = () => {
let top = 'inherit';
let left = 'inherit';
document.addEventListener("click", function(e){
console.log((e.clientX + 25) + 'px')
top = (e.clientY - 25) + "px";
console.log(top)
left = e.clientX - 25 + "px";
});
return (
<>
<div className="ball" style={{ transform: `top ${top}, left ${left}` }}></div>
</>
);
};
export default PlayArea;
The following CSS rules apply:
.ball {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: #0b8027;
position:absolute;
}