/

document.getElementById('test').addEventListener("click", function(event){
    var test = event.clientX / this.offsetWidth * 100;
    alert(test);
});

How can I get the percentage of the horizontal position clicked in relation to an elements width in pure Javascript? Right now I get the pixels of the viewport which the rectangle covers divided by the offsetWidth * 100 which gives me something totally different than expected. For example: if I click on the x center of the green box I get 50%.

I read about getBoundingClientRect() but im not sure if this would solve the issue and how it is used.

Edit: Could my math be off? As far as im aware, in order to get the percentage I need to calculate N1 / N2 * 100.

http://jsfiddle/UCFtB/33/

document.getElementById('test').addEventListener("click", function(event){
    var test = event.clientX / this.offsetWidth * 100;
    alert(test);
});

How can I get the percentage of the horizontal position clicked in relation to an elements width in pure Javascript? Right now I get the pixels of the viewport which the rectangle covers divided by the offsetWidth * 100 which gives me something totally different than expected. For example: if I click on the x center of the green box I get 50%.

I read about getBoundingClientRect() but im not sure if this would solve the issue and how it is used.

Edit: Could my math be off? As far as im aware, in order to get the percentage I need to calculate N1 / N2 * 100.

• javascript

• "How can I get the percentage of the horizontal position clicked within a div in pure Javascript? " Horizontal position in relation to width of element ? – guest271314 Commented Dec 26, 2015 at 15:22
• @guest271314 oh yes, I will edit my question. – Asperger Commented Dec 26, 2015 at 15:23
• event.clientX is giving you the x co-ordinate relative to the document. – Ian Jamieson Commented Dec 26, 2015 at 15:24
• @IanJamieson indeed. How can I make it in relation to an elements width? – Asperger Commented Dec 26, 2015 at 15:28
• @Asperger, I have updated with an answer. – Ian Jamieson Commented Dec 26, 2015 at 15:30

2 Answers 2

Try using event.offsetX

document.getElementById('test').addEventListener("click", function(event){
    var test = event.offsetX;
    alert(test);
});

jsfiddle http://jsfiddle/UCFtB/38/

event.clientX is giving you the x co-ordinate relative to the document. So you need to take into consideration the offsetLeft of the element, as shown below:

document.getElementById('test').addEventListener("click", function(event){
    var test = (event.clientX-this.offsetLeft) / this.offsetWidth * 100;
    console.log(test);
});

The code above will minus the elements offsetLeft from the clientX position, this logic will give the x position of the click relative to the element it was clicked in. Your percentage calculation will then work as expected.

jsfiddle: http://jsfiddle/ianjamieson/UCFtB/42/