PDA

View Full Version : NaN problem

Stoffel
01-28-2003, 05:35 PM
Hiya, I made a code for calculating the price af a movie

But every time I want to calculate the price I'm getting "NaN" and not the number I need (I know what NaN means)


<html>
<head>
<script type="text/javascript">
function pricecalculation() {
var price
var total
if (!(document.form1.type.value == 0) && !(document.form1.how_many.value == 0)) {
if (document.form1.type.value == 1) {
price = 9.90 }
else { price = 14.50 }

price = parseFloat(price)

switch(document.form1.how_many.value) {
case 1:{
total = price * 1 }
break;
case 2:{
total = price * 2 }
break;
case 3:{
total = price * 3 }
break;
case 4:{
total = price * 4 }
break;
case 5:{
total = price * 5 }
}

total = parseFloat(total)

document.form1.price.value = "€ " + total
}
else { document.form1.price.value = "" }
}


</script>
</head>
<body>
<form name="form1">
Movie:
<input type="text" name="name" value="A movie" size="30" onfocus="this.blur()">

Format:
<select name="type" onchange="pricecalculation()">
<option value="0">Select Format</option>
<option value="1">VHS</option>
<option value="2">DVD</option>
</select>
Quantity:
<select name="how_many" onchange="pricecalculation()">
<option value="0">Select Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Price:

<input type="text" name="price" value="" size="10" onfocus="this.blur()">

</form>
</body>
</html>


Hope u can help me
Catman
01-28-2003, 05:44 PM
In your case statements, try enclosing the values in quotes (since they're not numbers in the option tags). Your current code does not run any of the statements in your switch.
Stoffel
01-28-2003, 05:48 PM
What exactly do u mean?
beetle
01-28-2003, 06:01 PM
Your switch statement is overkill. You case each number only to multiply the total by that same number. Here's my take on it<html>
<head>
<script type="text/javascript">
function pricecalculation( f )
{
var price, total;
var qty = f.how_many.options[f.how_many.selectedIndex].value;
var type = f.type.options[f.type.selectedIndex].value;

if ( type != 0 && qty != 0 )
{
if ( type == 1 )
{
price = 9.90;
}
else
{
price = 14.50
}

// Note, the above if...else can be shortened to:
// price = ( type == 1 ) ? 9.90 : 14.50;

total = qty * price;
total = Math.round( total * 100 ) / 100;
f.price.value = total;
}
else
{
f.price.value = "";
}
}


</script>
</head>
<body>
<form name="form1">
Movie:
<input type="text" name="name" value="A movie" size="30" onfocus="this.blur()">

Format:
<select name="type" onchange="pricecalculation( this.form )">
<option value="0">Select Format</option>
<option value="1">VHS</option>
<option value="2">DVD</option>
</select>
Quantity:
<select name="how_many" onchange="pricecalculation( this.form )">
<option value="0">Select Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Price:

&euro; <input type="text" name="price" value="" size="10" readonly="true">

</form>
</body>
</html> and here's the shortest version of that functionfunction pricecalculation( f )
{
var price, total;
var qty = f.how_many.options[f.how_many.selectedIndex].value;
var type = f.type.options[f.type.selectedIndex].value;

if ( type != 0 && qty != 0 )
{
price = ( type == 1 ) ? 9.90 : 14.50;
f.price.value = Math.round( qty * price * 100 ) / 100;
}
else
f.price.value = "";
}
Stoffel
01-28-2003, 06:06 PM
Thnx, I'll try right now

One more question,
I am kind of new in JavaScript so:
In that function u mentioned "pricecalculation(f)"
Why the "f"?
beetle
01-28-2003, 06:12 PM
Hoboy.

Well, its important for you to understand that functions can receive parameters which become variables ready to use in that function. Of course, for the function to receive a parameter, it must also be passed when called.

onchange="pricecalculation( this.form )"

In the line above, I call the function pricecalculation and pass it a reference to the form, which is received by the function into the parameter f. So, now whenever I used f in my function, that is identical to using document.form1. Why the letter 'f'? Well, parameter names, like variables names, are chosen by the programmer, and I used f because it's a handy shorthand for "form".

got that?
Stoffel
01-28-2003, 07:52 PM
Hiya, me again :confused:

I changed the code a bit so I could work with different prices


price= ( type == 1 ) ? parseFloat(f.vhs1) : parseFloat(f.dvd1);


vhs1 and dvd1 are the prices, but by doing this I'm getting the NaN error back


Does anyone knows a solution?
Danne
01-28-2003, 08:13 PM
Are vhs1 and dvd1 elements in the form, or variables?

If they are elements in the form you should probably type:

price= ( type == 1 ) ? parseFloat(f.vhs1.value) : parseFloat(f.dvd1.value);




If they are variables you should cut that f before...
Stoffel
01-28-2003, 08:21 PM
Srry, it were elements in a form
but when I type what u said, it still gives me the NaN error
Danne
01-28-2003, 08:26 PM
What values do they hold?

Can u post the code for those elements?
Stoffel
01-28-2003, 08:29 PM
Found the error,
forgot to adapt a part of the code :o

Thnx, ur solution did work
whammy
01-28-2003, 11:56 PM
You couldn't get my example to work? :confused:


<html>
<head>
<title>Get the price</title>
<script type="text/javascript">
<!--
function formatCurrency(num) {
num = num.toString().replace(/\,/g,"");
num = !isNaN(num) ? Math.round(num * 100) / 100 : 0;
num.toString().indexOf(".") == -1 ? num += ".00" : void 0;
while(/\.\d{0,1}$/.test(num)) num += "0";
var objRegExp = new RegExp('(-?\[0-9]+)([0-9]{3})');
while(objRegExp.test(num)) num = num.toString().replace(objRegExp,'$1,$2');
return num;
}
function calculatePrice(movieType,movieQuantity) {
var moviePrice = new Array(0,9.95,14.95)
if(movieType > 0 && movieQuantity != "") {
document.forms[0].price.value = "$" + formatCurrency(moviePrice[movieType] * movieQuantity);
// window.open('pop1.html','','top=100,left=100,width=350,height=400')
}
else {
document.forms[0].price.value = "";
}
}
// -->
</script>
</head>
<body>
<form id="form1" action="javascript://" onsubmit="return false">
<table>
<tr>
<td>Movie:</td>
<td><input type="text" name="moviename" value="Enemy Mine" size="30" onfocus="this.blur()" /></td>
</tr>
<tr>
<td>Format:</td>
<td>
<select name="movietype" onchange="calculatePrice(this.selectedIndex,this.form.how_many.options[this.form.how_many.selectedIndex].value)">
<option value="">------</option>
<option value="vhs">VHS</option>
<option value="dvd">DVD</option>
</select>
</td>
</tr>
<tr>
<td>Quantity:</td>
<td>
<select name="how_many" onchange="calculatePrice(this.form.movietype.selectedIndex,this.options[this.selectedIndex].value)">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>Price:</td>
<td>
<input type="text" name="price" value="" size="10" onfocus="this.blur()" />
</td>
</tr>
</table>
</form>
</body>
</html>


I thought it was rather nice. :)
Stoffel
01-29-2003, 10:29 AM
Yeah I know,
but your program was a little bit to complicated for me,
It worked, probably better, but I found it difficult to adjust.

Thnx anyway :)