Get VW/VH position from onclick event in JS

766 Views Asked by Léo Badeaux At 28 February 2022 at 14:36

This code will give me the x and y value of the click in pixels:

document.getElementById("game").addEventListener("click", function(event) {
   console.log(event.clientX, event.clientY);
});

But how do I get the X and Y values comparitive to VH (Viewport Height) and VW (Viewport Width) (I want to get the value like how in CSS you can set an element to be 20vh [20% of viewport height] etc etc)

Original Q&A

There are 2 best solutions below

Arslan Akram On 28 February 2022 at 15:52 BEST ANSWER

You first need to get the Viewport Width (vw) by using window.innerWidth and Viewport Height (vh) by using window.innerHeight.

Then, divide the event.clientX by vw and multiply by 100 to get value in percentages. Same logic to get Y co-ordinates, i.e. divide the event.clientY by vh and multiply by 100 to get value in percentages.

See my demo below: (Click on Game to get the co-ordinates)

let gameEl = document.getElementById("game"),
  eCXinVWEl = document.getElementById("eCXinVW"),
  eCYinVHEl = document.getElementById("eCYinVH");

gameEl.addEventListener("click", function(event) {
  let vw = window.innerWidth,
    vh = window.innerHeight,
    eCXinVW = event.clientX / vw * 100, // Multiplying by 100 to get percentage 
    eCYinVH = event.clientY / vh * 100; // Multiplying by 100 to get percentage 

  console.log(eCXinVW, eCYinVH);

  eCXinVWEl.innerHTML = eCXinVW;
  eCYinVHEl.innerHTML = eCYinVH;
});

.box {
  padding: 50px;
}

#game {
  padding: 20px;
  background: red;
}

<html>

  <head>
  </head>

  <body>
    <div class="box">
      <h6>Event co-ordinates X by viewport width: <span id="eCXinVW">0</span>%</h6>
      <h6>Event co-ordinates Y by viewport height: <span id="eCYinVH">0</span>%</h6>

      <div id="game">Game</div>
    </div>
  </body>

</html>

Patrick Ferreira On 28 February 2022 at 15:51

Did you mean something like this ?

You just need to get the innerWidth and innerHeight from the window element than compute the percentage with a cross product

(elementX * 100) / viewport width
(elementY * 100) / viewport heght

document.getElementById("game")
  .addEventListener("click", function(event) {
    const debug = document.getElementById('debug');
    const clickX = event.clientX;
    const clickY = event.clientY;
      
    const vh = window.innerHeight;
    const vw = window.innerWidth;
  
    const ratioX = (clickX * 100) / vw;
    const ratioY = (clickY * 100) / vh;
  
    debug.innerHTML = '';
    debug.append(`X:${clickX}  Y:${clickY}`);
    debug.append("\n");
    debug.append(`%X:${ratioX} %Y:${ratioY}`);

  });

body {
  background-color: lemon;
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

#game {
  background-color: cyan;
  width: 29.7vw;
  height: 21vh;
  box-shadow: 0px 0px 2px rgba(0,0,0,.6), 0px 0px 6px rgba(0,0,0,.3);
}

<div id=game></div>

<pre id=debug>
  X:   Y:
  %X: %Y: 
</pre>

Get VW/VH position from onclick event in JS

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in DOM

Related Questions in ADDEVENTLISTENER

Related Questions in VIEWPORT-UNITS

Trending Questions

Popular # Hahtags

Popular Questions