Exact location coordinates using javascript e.clientX - box.offsetLeft

 let box = document.querySelector('.box');

let doc = document.body;

document.addEventListener('mousemove',(e)=>{
  x = e.clientX - box.offsetLeft;
  y = e.clientY - box.offsetTop;
  doc.textContent=x+' '+y;
});

Comments

Post a Comment

Popular posts from this blog

java on terminal

javac AnotherClass.java java AnotherClass src └── com     └── example         └── mypackage import src/com/example/mypackage/MyClass.java javac src/com/example/mypackage/MyClass.java
Read more

typing using javascript html css

Image
 <html> <style> textarea{   word-wrap: break-word;   white-space: pre-wrap;   grid:1   position:fixed;   z-index:1000; } body{   display: grid;   grid-template-columns: repeat(2,10vw);   grid-template-rows: repeat(2,10vw);   gap: 10px;   align-items: justify;   margin: 5px;   padding: 5px; } .output{   scroll-behavior: smooth;   height: auto;   width: auto; } </style>   <body> <textarea></textarea> <pre class="output"></pre> <div class="container"> <button class="activate">activate</button> <button class="clear">clear</button> </div>   </body> <script> let element = document.querySelector('textarea'); let destination = document.querySelector('.output'); let activate_btn = document.querySelector('.activate'); let clear_btn = document.querySelector('.clear'); let count=0; // event listener on activate butt...
Read more