Draw a point on an image based on its coordinates by clicking on it

Question

My problem is the following: I have generated a point I made in CSS in an image I call in my JS, however, it should be generated in the coordinates that are captured when clicking on the image.

    <script type="text/javascript">
        function coordenadas(event){
            x = event.clientX;
            y = event.clientY;
            //alert("X: "+x+" Y: "+y);
        }
    </script>

    <script type="text/javascript">
        function image() {
            var x = Math.floor(Math.random() * (17 - 1) + 1);
            var img = new Image();
            img.src = "../radiografias/"+x+".jpg";
            document.getElementById('image').innerHTML = "<img style=\"cursor:crosshair\" href=\"#\" onmousedown= \"coordenadas(event)\" src=\""
                + img.src + "\" width=1100 />";
        }
    </script>

    <style>
        .ponto{
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #FFFF00;
            position: absolute;
        }
    </style>

    <div id="image"></div>

If anyone can help, I’d really appreciate it...

Answer 1

You can do this by creating the element within the div:

function coordenadas(event){
   x = event.clientX;
   y = event.clientY;
   //console.log("X: "+x+" Y: "+y);
   
   var pto = document.querySelector('#image .ponto');
   
   if(pto !== null) pto.outerHTML = ''; // apago o ponto anterior, se houver
   
   var div = document.getElementById('image');
   var ponto = document.createElement("span");
   ponto.className = "ponto";
   ponto.style.cssText = "top: "+(parseInt(y)-2.5)+"px; left: "+(parseInt(x)-2.5)+"px;";
   div.appendChild(ponto); // crio o ponto
}

function image() {
   var x = Math.floor(Math.random() * (17 - 1) + 1);
   var img = new Image();
   img.src = "https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg";
   document.getElementById('image').innerHTML = "<img style=\"cursor:crosshair\" href=\"#\" onmousedown= \"coordenadas(event)\" src=\""
       + img.src + "\" width=1100 />";
}
image();

.ponto{
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background-color: #FFFF00;
   position: absolute;
}

<div id="image"></div>