calculate function: whats up with this then?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

calculate function: whats up with this then?

Post by Skittlewidth »

I've been trying to write a reasonably simply cost calulator, based on two levels of service, and a price drop the more of an item you purchase. When you hit submit the calculate() function should execute. I hate working with javascript because very often nothing happens! I just don't seem to be able to reassign values to variables and work with them. I get no error, nothing! Out of all the languages I've used javascript always has me stumped! Can anyone tell me why this doesn't work?

Code: Select all

function calculate(){
var servicelvl = document.calc.service.value;
var boxnum = document.calc.boxno.value;
var perbox;

if (servicelvl == 1){
	switch(boxnum){
		case (boxnum > 0 && boxnum <=55):
		  perbox = 55;  
		  break;
		case (boxnum > 55 && boxnum <=250):
		  perbox = 0.60;
		  break;
		case (boxnum > 250 && boxnum <= 500):
		  perbox = 0.55;
		  break; 
		case (boxnum >500 && boxnum <= 750):
		  perbox = 0.50;
		  break;
		case (boxnum >750 && boxnum <= 1000):
		  perbox = 0.45;
		  break;
		case (boxnum > 1000):
		  perbox = 0.40;
		  break;
    	default:
		  perbox = 0;
	}
}
else if (servicelvl == 2){
	switch(boxnum){
		case (boxnum > 0 && boxnum <=55):
		  perbox = 20;  
		  break;
		case (boxnum > 55 && boxnum <=250):
		  perbox = 0.40;
		  break;
		case (boxnum > 250 && boxnum <= 500):
		  perbox = 0.35;
		  break; 
		case (boxnum >500 && boxnum <= 750):
		  perbox = 0.30;
		  break;
		case (boxnum >750 && boxnum <= 1000):
		  perbox = 0.25;
		  break;
		case (boxnum > 1000):
		  perbox = 0.20;
		  break;
    	default:
		  perbox = 0;
	}

}
document.calc.answer.value = eval(boxnum * perbox);
}
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

You shouldn't need the eval(boxnum * perbox); (just boxnum*perbox).

You may also want to check the values you are getting. Put in a couple of temporary alerts

Code: Select all

var servicelvl = document.calc.service.value;
var boxnum = document.calc.boxno.value;
var perbox;
alert(&quote;Service Level :&quote;+servicelvl+&quote;\nBoxnum :&quote;+boxnum);
and check you are getting the values you expect. I am assuming that "calc" is your form name ?
User avatar
artexercise
Forum Commoner
Posts: 33
Joined: Thu Nov 20, 2003 9:38 am
Location: Raleigh, NC

Post by artexercise »

This will only work in IE, since Netscape accesses the DOM in a different manner.

I also don't think that the case statements take conditionals. Thus it is completely ignoring case(boxnum > 0 && boxnum <=55): and going straight to default. Try using if/if else statements.

If this is the only function you've got in your script tags you'll need to close the function with a '}' closing curly brace.

Code: Select all

<html>
	<head>
	<script language=&quote;javascript&quote;>
		function calculate(){
			var servicelvl = document.calc.service.value;
			var boxnum = document.calc.boxno.value;
				boxnum *= 1;
			var perbox;

			if (servicelvl == 1){
				if(boxnum>0 && boxnum<=55)
					perbox = 55;
				else if(boxnum>55 && boxnum<=250)
					perbox = .6;
				else if(boxnum>250 && boxnum<=500)
					perbox = .55;
				else if(boxnum>500 && boxnum<=750)
					perbox = .5;
				else if(boxnum>750 && boxnum<=1000)
					perbox = .45;
				else if(boxnum>1000)
					perbox = .4;
				else
					perbox=0;
			}
			else if (servicelvl == 2){
				if(boxnum>0 && boxnum<=55)
					perbox = 20;
				else if(boxnum>55 && boxnum<=250)
					perbox = .4;
				else if(boxnum>250 && boxnum<=500)
					perbox = .35;
				else if(boxnum>500 && boxnum<=750)
					perbox = .3;
				else if(boxnum>750 && boxnum<=1000)
					perbox = .25;
				else if(boxnum>1000)
					perbox = .2;
				else
					perbox=0;
			}
			document.calc.answer.value = boxnum * perbox;
		}
	</script>
	</head>
	<body>
		<form id=&quote;calc&quote; name=&quote;calc&quote; method=&quote;POST&quote; action=&quote;javascript:calculate();&quote;>
			<table width=&quote;250&quote;>
				<tr>
				<th>Service # : </th>
				<td>
					<select id=&quote;service&quote; name=&quote;service&quote;>
						<option value=&quote;1&quote;> service level 1
						<option value=&quote;2&quote;> service level 2
					</select>
				</td>
				</tr>
				<tr>
				<th>Box # : </th>
				<td>
					<input type=&quote;text&quote; id=&quote;boxno&quote; name=&quote;boxno&quote;>
				</td>
				</tr>
				<tr>
				<th>Answer : </th>
				<td>
					<input type=&quote;text&quote; id=&quote;answer&quote; name=&quote;answer&quote;>
				</td>
				</tr>
				<tr>
				<td colspan=&quote;2&quote; align=&quote;right&quote;>
					<input type=&quote;button&quote; value=&quote;Calculate&quote; onClick=&quote;javascript:calculate();&quote;>
				</td>
				</tr>
			</table>
		</form>
	</body>
</html>
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

artexercise wrote:This will only work in IE, since Netscape accesses the DOM in a different manner.
Both Netscape/firefox and IE can access "document.formname.inputname.value" without a problem.
User avatar
artexercise
Forum Commoner
Posts: 33
Joined: Thu Nov 20, 2003 9:38 am
Location: Raleigh, NC

Post by artexercise »

I checked in NS 4.76 and it does not function correctly but in NS 7.01 it does. So it must be later versions that accept the more logical DOM. Thanks, CoderGob.
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Post by Skittlewidth »

Thanks for those tips. When I wrote a much simpler test for the script I found I had to use eval() for the calculation to happen, but I will try it again.

Also, why won't case statements take conditionals? The same script worked in PHP
Post Reply