Printing the values written in the console log to the screen

Question

I wish you a healthy day. I had one question. As you can see in the photo below, console.log contains the coordinates of the mouse on the photo. How can I write these coordinates as X, Y under the photo so that they will change instantly in the same way and appear on the page, not the console? At the same time, when clicked with the mouse, I want it to write the coordinates under it as a list, like a record. Thanks.

I am using these codes to write the coordinates on console.log :

    let pos = getCursor()
    console.log('pos:', pos)

The Screenshot of the screen and console : Screenshot

Do you want to write coordinates to some element below the image? — s.kuznetsov, May 30 '21 at 08:19
Are you looking for this? https://developer.chrome.com/blog/new-in-devtools-70/#watch — pavi2410, May 30 '21 at 08:37
Yes I wanna write the coordinates to below the image. The coordinates should be coordinates of the image not the browser's or screen's mouse locations. — Nurettin Önder, May 30 '21 at 08:42
Does this answer your question? [Convert console.log to output to a div](https://stackoverflow.com/questions/39488552/convert-console-log-to-output-to-a-div) — freedomn-m, May 30 '21 at 09:28

Bartosz Władyka · Answer 1 · 2021-05-30T08:30:46.807

0

https://htmldom.dev/calculate-the-mouse-position-relative-to-an-element/

Code:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiuNnCTe_G0nD5EnKG62TETP_bkdDfmn4BKg&usqp=CAU"
      alt=""
    />
    <script src="index.js"></script>
    <p id="display-pos"></p>
    <p id="display-pos-save"></p>
  </body>
</html>

JS

addEventListener("mousedown", function (e) {
  // Get the target
  const target = e.target;

  // Get the bounding rectangle of target
  const rect = target.getBoundingClientRect();

  // Mouse position
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  document.getElementById(
    "display-pos-save"
  ).innerHTML = `pos x = ${x} pos y = ${y}`;
});

addEventListener("mousemove", function (e) {
  // Get the target
  const target = e.target;

  // Get the bounding rectangle of target
  const rect = target.getBoundingClientRect();

  // Mouse position
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  document.getElementById(
    "display-pos"
  ).innerHTML = `pos x = ${x} pos y = ${y}`;
});

edited May 30 '21 at 08:30

answered May 30 '21 at 07:53

Bartosz Władyka

17
5

Thank you very much for your answer. It is worked but I need to take coordinates of the photo , not all of the screen or browser. Which part should I change the code ? On the other hand , how can I add , when I have clicked on a place on image , I need to took it and write below like Your choice : ... of the real-time positioner. – Nurettin Önder May 30 '21 at 08:00
Do you want to save somewhere those coordinates after you click? or is it just fine if it stays there, but disappears after reload? – Bartosz Władyka May 30 '21 at 08:03
No it will better to disappear after reload , I just want to take user's coordinates. After that I will save it. But I need to take mouse on image coordinates. – Nurettin Önder May 30 '21 at 08:07
Ok, I edited my original answer, check if this is what you wanted to achive – Bartosz Władyka May 30 '21 at 08:31
If there is anything more, just let me know – Bartosz Władyka May 30 '21 at 08:32
Could you contact me via email on mailto:nurettinonder28@gmail.com – Nurettin Önder May 30 '21 at 08:40
Are there any problems? you can move this discussion to chat here if you want – Bartosz Władyka May 30 '21 at 08:43
It will worked well with your image but when I came over my image the position is stops like x:62.5 y:62.5. How can I change it with my image. – Nurettin Önder May 30 '21 at 08:55
Here is my HTML code which is includes my image which is shoe1.jpg. https://pastebin.ubuntu.com/p/QF3jKb9HGG/ – Nurettin Önder May 30 '21 at 08:57
With your html it still works fine for me, can you share your js? – Bartosz Władyka May 30 '21 at 09:04
Here is the js code : https://pastebin.ubuntu.com/p/yqBStCDYNd/. You can use whatever you want for the images/shoe1.jpg – Nurettin Önder May 30 '21 at 09:09
Just paste my JS code under or above your code in js file – Bartosz Władyka May 30 '21 at 09:17
I will email you html & js code let me know if it worked – Bartosz Władyka May 30 '21 at 10:30

Printing the values written in the console log to the screen

1 Answers1