CODEWITHSUNDEEP
javascriptcalculator
Laura.H
Laura.H

Reputation: 3

Creating a Profit Calculator

I'm trying to create a basic profit calculator but I am struggling with one issue.

I've written some basic javascript and the formula almost works. However my issue is that the decimal point doesn't seem to want to work properly. For example:

What is the case cost: 2.80 How may units per case: 2 What is the sell price: 3.15 Total Profit = 1.75 Profit should of course be, 0.175

I'm a complete newbie to JavaScript so your help would be much appreciated. 

<form id="profitCalculator">
<p><label>What is the case cost? <input type="text" name="casecost"></label></p>
<p><label>How many packs / units per case? <input type="text" name="packs"></label></p>
<p><label>What is the sell price? <input type="text" name="sell_price"></label></p>    
<p>Total profit £: <input type="text" name="profit"></p>


document.getElementById('profitCalculator').onclick = function () {
var casecost = this.elements['casecost'].value || 0;
var packs = this.elements['packs'].value || 0;
var sell_price = this.elements['sell_price'].value || 0;
var profit = sell_price - casecost / packs;
this.elements['profit'].value = profit.toFixed(2); }

Thanks

Upvotes: 0

Views: 2923

Answers (4)

Matt Burland
Matt Burland

Reputation: 45135

See MDN's reference on Operator Precedence and you'll see that division (and multiplication) is done before addition or subtraction. So you have essentially:

3.15 - (2.80 / 2) = 1.75

Instead of:

(3.15 - 2.80) / 2 = 0.175

Also note, as @Adrian Schmidt pointed out, using floating point numbers for math is a bad idea. If you do that above calculation in javascript you actually get:

0.17500000000000004

Because computers don't have infinite precision when representing floating point numbers. See, for example: Is floating point math broken?

So your formula should be:

(sell_price - casecost) / packs

Another thing to consider is that the values you get from your text boxes are strings, not numbers. Your formula works because there is no - operator for strings, so javascript automatically converts your values to numbers. But this is a dangerous thing to rely on. For example, if you did this:

sell_price + casecost

With your example inputs, the result would be:

"3.152.80"

Because it's doing string concatenation, not addition.

So it's worth using parseFloat to convert your strings. (and parseInt for packs as it is, presumably, an integer)

So a complete example might look like this:

var casecost = parseFloat(this.elements['casecost'].value) * 100 || 0;
var packs = parseInt(this.elements['packs'].value, 10) || 0;  
var sell_price = parseFloat(this.elements['sell_price'].value) * 100 || 0;
var profit = ((sell_price - casecost) / packs) / 100;
this.elements['profit'].value = profit.toFixed(2);

Also note that if packs is 0, then you'll have a divide by zero error. You'll want to add logic to check the value of packs and do something when it's zero (not calculate the profit).

Upvotes: 0

mariodiniz
mariodiniz

Reputation: 102

your problem occurs because operators procedence.

var profit = sell_price - casecost / packs;

/ (division) occurs first than - (minus). As your example.

2.80 / 2 = 1.4 
3.15 - 1.4 = 1.75

You should put some parenthesis covering what has to priority, in your case, to get the value 0.175, you should put the like this.

(3.15 - 2.80) / 2 = 0.175

in code

var profit = (sell_price - casecost) / packs;

Upvotes: 0

Toby Cannon
Toby Cannon

Reputation: 735

Look at order of operations, you may know this as 'BODMAS' Supporting Link: http://www.mathsisfun.com/operation-order-bodmas.html

Change to (sell_price - casecost) / packs;

Upvotes: 0

Adrian Schmidt
Adrian Schmidt

Reputation: 1885

It should be

var profit = (sell_price - casecost) / packs;

BUT - Never calculate currency with decimals in Javascript!

Javascript will truncate decimal values when they become to long, possibly resulting in nasty rounding errors. Always multiply your values by 100, then calculate everything, and at last, divide by 100 again.

Upvotes: 3

Related Questions