Is it possible to have jQuery do a mathematical calculation from a DIV's numerical content?

Question

I have a DIV that is fed by a server side script that I don't have access too, and it outputs the value in £'s.

HTML Example:

<div id="totalExpenditure">£1,125</div>

I then want to have a jQuery script take that figure and workout the difference between a set value of £2,000 and result it to another DIV.

Which says: <div id="totalSurplus">You have £725 remaining.</div>

I've searched Google for mathmatic jQuery but the results look far too complex. What I'm not sure is even possible is to convert the output of the ID totalExpenditure into the DOM to be manipulated.

jQuery doesn't do math. JavaScript does. – Diodeus - James MacFarlane Mar 05 '12 at 14:13 — Diodeus - James MacFarlane, Mar 05 '12 at 14:13

score 3 · Accepted Answer · answered Mar 05 '12 at 14:17

3

1) get the string: var myVal = $('#totalExpenditure').text()

2) Get rid of the non-numeric pound sign: myVal = myVal.replace('£','') and the comma myVal = myVal.replace(',','')

3) turn it into an number: myVal = parseFloat(myVal)

4) Perform any math you want with myVal.

You can do this all in one step, but this gives you an idea of how the language works.

answered Mar 05 '12 at 14:17

Diodeus - James MacFarlane

112,730
33
157
176

Don't forget about the `,` in the number. – Mar 05 '12 at 14:19
Hi Diodeus, thanks for your input in this. (and am not i am's point about the comma). I've used the original script you posted, and as said, i get NaN. How do I amend this to remove both the £ and the comma please? var num = parseFloat($("#totalExpenditure").text().replace("£", "")); – JayDee Mar 05 '12 at 14:44
Use: .replace("£", "")..replace(",", "") – Diodeus - James MacFarlane Mar 05 '12 at 14:47

score 2 · Answer 2 · edited May 23 '17 at 12:21

You've got two issues here.

First you need to parse a string and convert it to a number.

Then you need to perform the calculation.

Neither of these are really jquery specific. JQuery can help with getting the string, and writing the output, but the rest is just pure javascript.

var num = parseFloat($("#totalExpenditure").text().replace("£", ""));

var remain = 2000 - num;

var outputStr = "You have £" + remain.toFixed(2) + " remaining";

$("#totalSurplus").text(outputStr);

For more control over the output of the currency perhaps check out this post: How can I format numbers as money in JavaScript?

If you don't remove the `,` from the number, `remain` will be `NaN`. — , Mar 05 '12 at 14:24

score 1 · Answer 3 · answered Mar 05 '12 at 14:16

1

You are able to feed the value (£1,125) from the server to the client's JavaScript engine the same way you're feeding HTML to the client.

It is really not recommended to read a DOM element for a text node and interpret said node as a value for mathematical operations. You should have a JavaScript variable aside to calculate this for you.

answered Mar 05 '12 at 14:16

Rémi Breton

4,209
2
22
34

Why is it "really not recommended"? – Diodeus - James MacFarlane Mar 05 '12 at 14:19
Because you need to parse it back to an integer every time. You need to go from £1,125 to 1125, assuming the node value didn't change client-side. – Rémi Breton Mar 05 '12 at 14:33
Sure, but the question clearly states that the OP has no control over how the page is generated. – Diodeus - James MacFarlane Mar 05 '12 at 14:37

Alberto De Caro · Answer 4 · 2012-03-05T14:30:13.777

0

obtain the totalExpenditure div content and set totalExpenditure var value (using a regex):

var content = $('#totalExpenditure').text();

var pattern = /[0-9\.,]/g;

var totalExpenditure = pattern.exec(content);
subtract

var totalImport = 2000;

var result = totalImport - totalExpenditure;

edited Mar 05 '12 at 14:30

answered Mar 05 '12 at 14:22

Alberto De Caro

5,147
9
47
73

Is it possible to have jQuery do a mathematical calculation from a DIV's numerical content?

4 Answers4