Javascript reduce a number by a percentage within a class

Question

I have a third-party estimation tool that is consistently providing results 30% higher than it should, and getting the company to update the tool isn't an option. So, how can I use Javascript/jQuery DOM to adjust the numbers being rendered?

<div class="general-avg"><strong>$276,000</strong></div>

I would like to capture the $276,000 as a variable and then reduce it by 30%. Can anyone explain how to do this? TIA

Mohammad Ali · Answer 1 · 2017-02-17T00:24:23.407

0

Attached below is some javascript that will run on page load and will reduce any tag with the classname general-avg by 30 percent

var Numbers = document.getElementsByClassName("general-avg");
for (var i = 0; i < Numbers.length; i++) {
  Numbers[i].innerText = "$" + Math.round(Number(Numbers[i].innerText.replace(/\D/g, '')) * 0.7).toString().replace(/(...)(.)/g, "$1,$2")
}

A demo of the code can be found: HERE

edited Feb 17 '17 at 00:24

answered Feb 17 '17 at 00:17

Mohammad Ali

878
8
16

breaks completely on numbers which are don't produce round result: https://jsfiddle.net/btvLnqyt/4/ – Miroslav Saracevic Feb 17 '17 at 00:22
Miroslav i have fixed it so that it rounds up to a whole number: jsfiddle.net/btvLnqyt/5 – Mohammad Ali Feb 17 '17 at 00:24
OP hasn't specified what happens in that case, you can't just round up financial numbers – Miroslav Saracevic Feb 17 '17 at 00:26

Miroslav Saracevic · Accepted Answer · 2017-02-17T00:32:22.590

Usually SO community expects at least some code that you might have tried to solve the issue yourself. That is most likely the reason for all the down votes.

But I will assume that JS is not your main job and you don't even know where to start so I will help you out.

This solution does not need any library, it works without jQuery.

// first lets get the divs by class name
var values = document.getElementsByClassName('general-avg');

// then lets go through each of the divs and select strong element inside
[].forEach.call(values, function (item) {
  // assumption is that your 3rd party gives you always just one strong tag inside
  var strong       = item.getElementsByTagName('strong')[0];
  // once we have that element selected, take the number from inside, strip $ and remove commas, parse it to float
  var newValue     = parseFloat(strong.innerText.replace('$','').replace(',',''));

  // once we have that, multiply by 0.7 (I sure hope that is how you deduct 30%, otherwise this is emberassing)
  newValue = newValue * 0.7;

  // once we have that value we just need to format it a bit, this is shameless copy paste from
  // http://stackoverflow.com/a/10899795/3963682
  var formatNewValue = newValue.toString().split(".");
  newValue = formatNewValue[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (formatNewValue[1] ? "." + formatNewValue[1] : "");

  // at the end, put the number back in, and add $ sign in front
  strong.innerText = '$' + newValue;
});

Example: http://codepen.io/anon/pen/xgeQjV

Thank you. I greatly appreciate it. You're right, JS isn't my main job... mostly just design and some UI stuff. Again, thanks... this helped alot. — Scott Blair, Feb 17 '17 at 01:08
Miroslav, how would I round to the nearest integer with this? I tried strong.innerText = '$' + Math.round(Number(newValue)); on the last line, but that's not working for me. — Scott Blair, Feb 17 '17 at 15:44
Nevermind, I got it! :) added "newValue = Math.round(newValue);" right after "newValue = newValue * 0.7;" — Scott Blair, Feb 17 '17 at 16:02
But depending on what the app does, be careful about rounding. You can check here about it: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math/round . Also maybe worth looking into `ceil` or `floor`. — Miroslav Saracevic, Feb 17 '17 at 16:18

score 0 · Answer 3 · edited May 23 '17 at 12:25

$('.general-avg strong').each(function() {
  var $avgPrice = $(this)
  var number = Number($avgPrice[0].innerHTML.replace(/[^0-9\.]+/g,""));
  
  // the 1000s avoid rounding issues
  number = number - (number * 0.3 * 1000 / 1000)
  
  $avgPrice[0].innerHTML = `$${numberWithCommas(number)}`
})

//put the commas back in
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="general-avg"><strong>$100,000</strong></div>
<div class="general-avg"><strong>$276,000</strong></div>

numberWithCommas function came from here.

Javascript reduce a number by a percentage within a class

3 Answers3