Page 1 of 1

calculate function: whats up with this then?

Posted: Mon Jun 06, 2005 8:22 am
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);
}

Posted: Mon Jun 06, 2005 9:09 am
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 ?

Posted: Mon Jun 06, 2005 9:30 am
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>

Posted: Mon Jun 06, 2005 9:37 am
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.

Posted: Mon Jun 06, 2005 9:44 am
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.

Posted: Mon Jun 06, 2005 9:53 am
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