I try to write on the browser the coordinates where the mouse is. This only creates an h5 for me and my goal is to create it in the mouse coordinates and delete the previous record
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</head>
<body>
</body>
<script>
let ref = document.getElementsByTagName('html');
ref[0].addEventListener('mousemove', (e) => {
let caja=document.createElement("h5");
caja.innerText=`${e.screenX} ${e.clientY}`;
document.body.appendChild(caja);
})
</script>
</html>
If your goal is to add a
h5
just at the current mouse position in theDOM
, you can read the mouse coordinates in the eventmousemove
, which provides the exact mouse position in theclientX
and propertiesclientY
.Then you add an h5 with
position: fixed;
y with the mouse coordinates, so that it is right at the position where the mouse is.I am attaching a demo that you can run live if you are in a browser.
If on the other hand, you just want to update an h5 in a fixed position, just update the text of the
h5
on each event: