Get percentage between numbers and add results to div

Question

Im trying to calculate the percentage between numbers and ad the results to a div.

The HTML looks something like below - two divs with numbers and a placeholder a element for the results. One of the divs has a number i cant control with currency symbol, a dot and a space in the end - the second number i set manually and can control.

First I tried the script from this thread: jquery: percentage of two numbers

But I couldn't get that to work.

Second I tried this script:

$('.left').each (function() {
        var frstCol = $(this).find('em.price.product-card-price').text();
        var seCol = $(this).find('em.price.product-card-price.before').text(); 
       alert(frstCol)

           var result = (parseInt(frstCol) / parseInt(seCol))* 100 ;
           console.log(result);
           if(isNaN(result))
             $(this).find('a.pricebubble').text(0);
           else
             $(this).find('a.pricebubble').text(result);

    });

This outputs a number, 100, which of course is not correct.

How do I do this? It needs to be in an .each functions since I have several elements, and I need the numbers to be rounded of to an even number, like -16%, -50% etc.

<div class="left">
 <em class="price product-card-price">€1.019&nbsp;<span class="vatstatus">Exclusief BTW</span></em>
 <em class="price product-card-price before">1519</em>
 <a class="pricebubble"></a>

your price contains pound sign. That one is making the problem. — Anoop Joshi P, Jun 08 '16 at 07:17
@AnoopJoshi yes I understand this, but I cant remove it. It is inserted dynamically and needs to be showed. — Jerry Svensson, Jun 08 '16 at 07:24
You should use form inputs and the method `.val()` as it is in the previous question. If there's a form field that has a constant value, you give it readonly attribute. — zer00ne, Jun 08 '16 at 07:24
@GSB i tried to recreate this in a fiddle, but that script I show wont output the faulty numbers in the fiddle, it does however create an number in the live environment. — Jerry Svensson, Jun 08 '16 at 07:25

Rory McCrossan · Accepted Answer · 2016-06-08T07:29:23.827

2

The issue with your code is that the text() values from the em elements cannot be directly converted to numbers using parseInt. You need to remove the Euro symbol, the thousand separator and ensure the start of the string is the first digit of the numerical value by using trim(). From there your calculation works:

$('.left').each(function() {
    var frstCol = parseInt($(this).find('em.price.product-card-price').text().trim().replace(/[€\.]/g, ''), 10);
    var seCol = parseInt($(this).find('em.price.product-card-price.before').text().trim(), 10);        
    var result = (frstCol / seCol) * 100;
    $(this).find('a.pricebubble').text(result || 0);
});

Working example

edited Jun 08 '16 at 07:29

answered Jun 08 '16 at 07:23

Rory McCrossan

331,213
40
305
339

Works good, one thing that confused me though - I tried a number that should give me a 33% difference, it showed 67.08360763660302%? Is it possible to reverse the numbers, and trim it to remove the everything after the decimal(dot)? – Jerry Svensson Jun 08 '16 at 08:02
You can amend the calculation on the integer values to be whatever you require. To round the figures, use `toFixed()`, eg. `parseInt(result)` but note this will change the value to a string. – Rory McCrossan Jun 08 '16 at 08:03
Thanks for the help Rory, `result.toFixed(0)` fixed the trim issue. Unsure how to display 33% instead of 67% though. – Jerry Svensson Jun 08 '16 at 08:06
It may be worth starting a new question for that. – Rory McCrossan Jun 08 '16 at 08:06
Yeah maybe, not sure how to formulate the question though. and I cant start a new question until 90 minutes :) – Jerry Svensson Jun 08 '16 at 08:16

Amar Singh · Answer 2 · 2016-06-08T07:40:31.830

DEMO

You put your pound value in a separate span with and id <span id="pounds">1.019</span> and perform the operations as you did

    <div class="left">
<em class="price product-card-price">€<span id="pounds">1.019</span>&nbsp;<span class="vatstatus">Exclusief BTW</span></em>
 <em class="price product-card-price before">1519</em><br/>
 <a class="pricebubble"></a>
 </div>

$('.left').each (function() {
        var frstCol = $(this).find('em.price.product-card-price #pounds').text().split('.').join("");
    var seCol = $(this).find('em.price.product-card-price.before').text().split('.').join("");
       //alert(frstCol+'  '+seCol)

           var result = (parseInt(frstCol) / parseInt(seCol))* 100 ;
           console.log(result);
           if(isNaN(result))
             $(this).find('a.pricebubble').text(0);
           else
             $(this).find('a.pricebubble').text(result);
             alert(result)
    });

Don't forget to remove the thousand separator too. – Rory McCrossan Jun 08 '16 at 07:25 — Rory McCrossan, Jun 08 '16 at 07:25

Get percentage between numbers and add results to div

2 Answers2

Linked