calculator script works but sometimes gives unwanted results

lessdangerous · 07-05-2005, 10:22 PM

I'm pretty much a beginner to javascript and can read the stuff better than I can write it. That being said, I've put together a script to work with a form that'll calculate the cost of a shirt based on quantity and color. For the most part it works, but I have a few questions:

1) When I type in the first box (quantity) a digit between 2 and 9 I get something completely wrong from what I'm supposed to get, which usally is a "NaN". The numbers 1, and 10 through 47 work like they're supposed to. Why doesn't it work for numbers 2-9?

2) When I do put in a good number to work with and select a color, sometimes when the price should be something like "7.50" it actually spits out "7.5". Why does it leave off the zeroes at the end of numbers and how can I prevent it?

Code:

<html>
<head>
<script>
<!-- 
function getPrice(formName){ 

var myForm = formName.name; 
var COLOR = formName.shirtcolor; 
var QTY = formName.quantity; 
var COLORPRICE; 
var QTYPRICE; 
var QUOTEPRICE; 

if ( myForm == "calculator" ){ 
   if ((QTY.value >= "1" ) && (QTY.value <= "11" )){ 
      QTYPRICE = "27.50"; 
      } 
   if ((QTY.value >= "12" ) && (QTY.value <= "23" )){ 
      QTYPRICE = "7.50"; 
      } 
   if ((QTY.value >= "24" ) && (QTY.value <= "47" )){ 
      QTYPRICE = "6.75"; 
      } 
   if ( COLOR.value == "White" ){ 
      COLORPRICE = "0.00"; 
      } 
   if ( COLOR.value == "Light" ){ 
      COLORPRICE = "0.50"; 
      } 
   if ( COLOR.value == "Dark" ){ 
      COLORPRICE = "1.00"; 
      } 
   } 
QUOTEPRICE = parseFloat(QTYPRICE) + parseFloat(COLORPRICE);
formName.display.value = QUOTEPRICE;
} 
// --> 
</script>
</head>
<body>

<form name="calculator">

<input type=text name="quantity" size="2">

<select name="shirtcolor">
<option selected> 
<option value="White">White</option>
<option value="Light">Ash</option>
<option value="Dark">Black</option>
</select>

<input type="button" value="Calculate Quote" onClick="getPrice(this.form)">

<input type="text" name="display" size="7"> 

</form>

</body>
</html>

A1ien51 · 07-05-2005, 11:54 PM

you are compareing stings....you want to compare numbers...

if ((parseInt(QTY.value) >= 1 ) && (parseInt(QTY.value) <= 11 )){

glenngv · 07-06-2005, 03:39 AM

Code:

//courtesy of liorean (http://www.codingforums.com/showthre...077#post178077)
Number.prototype.toDecimals=function(n){
    n=(isNaN(n))?
        2:
        n;
    var
        nT=Math.pow(10,n);
    function pad(s){
            s=s||'.';
            return (s.length>n)?
                s:
                pad(s+'0');
    }
    return (isNaN(this))?
        this:
        (new String(
            Math.round(this*nT)/nT
        )).replace(/(\.\d*)?$/,pad);
}

function getPrice(formName){ 
  var QTY = Number(formName.quantity.value); 
  if (isNaN(QTY)){
    alert("Quantity should be numeric.");
    formName.quantity.focus();
    return false;
  }
  var COLOR = formName.shirtcolor.options[formName.shirtcolor.selectedIndex].value; 
  var COLORPRICE = 0; 
  var QTYPRICE = 0; 
  var QUOTEPRICE; 

  if ( myForm == "calculator" ){ 
    if (QTY >= 1 && QTY <= 11){ 
      QTYPRICE = 27.5; 
      } 
    if (QTY >= 12 && QTY <= 23){ 
      QTYPRICE = 7.5; 
      } 
    if (QTY >= 24 && QTY <= 47){ 
      QTYPRICE = 6.75; 
      } 

    switch (COLOR){
      case "White": COLORPRICE = 0; break;
      case "Light": COLORPRICE = 0.5; break;
      case "Dark":  COLORPRICE = 1; break;
    } 
   }
   QUOTEPRICE = (QTYPRICE + COLORPRICE).toDecimals(2);
   formName.display.value = QUOTEPRICE;
}

I don't know if you really need the if ( myForm == "calculator" ) condition. Will you have multiple forms with the same field names in the future?