In JavaScript doing a simple shipping and handling calculation

Question

I am having trouble with a simple JavaScript calculation. My document is supposed to add $1.50 to an order if it is $25 or less, or add 10% of the order if it is more then $25. The exact problem is:

Many companies normally charge a shipping and handling charge for purchases. Create a Web page that allows a user to enter a purchase price into a text box and includes a JavaScript function that calculates shipping and handling. Add functionality to the script that adds a minimum shipping and handling charge of $1.50 for any purchase that is less than or equal to $25.00. For any orders over $25.00, add 10% to the total purchase price for shipping and handling, but do not include the $1.50 minimum shipping and handling charge. The formula for calculating a percentage is price * percent / 100. For example, the formula for calculating 10% of a $50.00 purchase price is 50 * 10 / 100, which results in a shipping and handling charge of $5.00. After you determine the total cost of the order (purchase plus shipping and handling), display it in an alert dialog box.

This is my code:

    var price = window.prompt("What is the purchase price?", 0);
var shipping = calculateShipping(price);
var total = price + shipping;
function calculateShipping(price){
if (price <= 25){
 return 1.5;
}
else{
 return price * 10 / 100
}
}
window.alert("Your total is $" + total + ".");

When testing I enter a number in the prompt box, and instead of calculating as if I entered a number it calculates as if I entered a string. i.e. i enter 19 and it gives me 191.5 or I enter 26 and it gives me 262.6

Use `parseInt` to convert the prompted input to a number. http://www.w3schools.com/jsref/jsref_parseint.asp — Pekka, Jan 05 '11 at 16:12
@Dutchie - Technically its better to handle money values as an int, anyway. I.e. store it as cents (or pence - I'm english) and then do the division when you want to display. — James Wiseman, Jan 05 '11 at 16:20
Still @dutchie fair enough, I wasn't paying attention. `parseFloat` is probably the more fitting — Pekka, Jan 05 '11 at 16:21
@James - no one is storing anything in the above example. The user is inputing the money value into a text box. Am I missing something? — Dutchie432, Jan 05 '11 at 16:33
@Dutchie - No you are not mising anything. It was a bonus thought for if you are storing a money related field. Worth clarifying though, thanks. — James Wiseman, Jan 05 '11 at 16:42

score 2 · Accepted Answer · edited May 23 '17 at 11:47

2

Using parseFloat will help you:

var price = parseFloat(window.prompt("What is the purchase price?", 0))
var shipping = parseFloat(calculateShipping(price));
var total = price +shipping;
function calculateShipping(price){
if (price <= 25){
 return 1.5;
}
else{
 return price * 10 / 100
}
}
window.alert("Your total is $" + total + ".");

See it working at: http://jsfiddle.net/e8U6W/

Also, a little-known put more performant way of doing this would be simply to -0:

var price =window.prompt("What is the purchase price?", 0) - 0;

(See: Is Subtracting Zero some sort of JavaScript performance trick?)

Be sure to comment this, though as its not as obvious to those reading your code as parseFloat

edited May 23 '17 at 11:47

Community

1
1

answered Jan 05 '11 at 16:14

James Wiseman

29,946
17
95
158

Thanks all of you! I knew about parseFloat() and parseReal(), but was not sure how to use them....My code works now!! – Nicole Jan 05 '11 at 16:18
No worries. Do you want to accept that then (click the tick)? – James Wiseman Jan 05 '11 at 16:20

score 0 · Answer 2 · answered Jan 05 '11 at 16:13

0

you can easily convert a string to a number

http://www.javascripter.net/faq/convert2.htm

basically JS provides parseInt and parseFloat methods...

answered Jan 05 '11 at 16:13

hvgotcodes

118,147
33
203
236

score 0 · Answer 3 · answered Jan 05 '11 at 16:14

0

Actually, you need to cast your text results into float values using parseFloat()

http://www.w3schools.com/jsref/jsref_parseFloat.asp

answered Jan 05 '11 at 16:14

Dutchie432

28,798
20
92
109

score 0 · Answer 4 · edited May 23 '17 at 12:11

0

See my answer to the s/o question "Javascript adding two numbers incorrectly".

edited May 23 '17 at 12:11

Community

1
1

answered Jan 05 '11 at 16:14

Phrogz

296,393
112
651
745

score 0 · Answer 5 · answered Jan 05 '11 at 16:15

A bit of redundant multiplication, but your problem is that the numbers that are being inputted are treated as strings, not numbers. You have to convert them to floating point numbers:

var price = parseFloat(window.prompt("What is the purchase price?", 0));
var shipping = calculateShipping(price);
var total = price + shipping;

function calculateShipping(price)
{
  if (price <= 25)
  {
   return 1.5;
  } else {
    return price / 10
  }
}

window.alert("Your total is $" + total + ".");

score 0 · Answer 6 · answered Jan 05 '11 at 16:17

0

var price = parseFloat(window.prompt("What is the purchase price?", 0)); 
var shipping = calculateShipping(price); 
var total = price + shipping; 
function calculateShipping(price){ 
  var num = new Number(price);
  if (num <= 25){  
    return 1.5; 
  } else{  
    return num * 10 / 100 
  } 
} 
window.alert("Your total is $" + total + ".");

This should do it for you.

answered Jan 05 '11 at 16:17

k rey

611
4
11

I am curious as to why you would add this line: var num = new Number(price); – Nicole Jan 06 '11 at 20:02
The primary reason is for argument validation (not to assume that a float would be passed). A alternative reason is to ensure that a numeric variable is used for the calucaltion of the shipping price. – k rey Jan 06 '11 at 20:23

In JavaScript doing a simple shipping and handling calculation

6 Answers6

Linked

Related