My project begins with a blank canvas, prompting the user to click anywhere on the page to reveal an image. My goal is to show an image at the exact location where the user clicks. Although I can successfully trigger an image to appear in the corner of the window upon any click, I am struggling to match the coordinates of the click with the placement of the image. Currently, when a user clicks within the window, an image of a snowball pops up in the upper left corner along with displaying the x-coordinate of the click. Each subsequent click changes the displayed x-coordinate. How can I adjust my code to make the snowball appear at the click coordinates?
<head>
<script>
document.onclick = userClicked;
function userClicked() {
var x = event.clientX;
var y = event.clientY;
document.getElementById("xCoord").innerHTML=x;
document.getElementById("snowballAppear").style.display = '';
}
</script>
<div class "container">
<div class "picture">
<img alt="snowballAppear" id="snowballAppear" style="display: none" src="http://vignette3.wikia.nocookie.net/pottermore/images/9/99/Snowball-lrg.png/revision/latest?cb=20130412122815"/>
</div>
</div>
</head>