Beginner, javascript code help!

snikker74 · April 3rd, 2008, 04:46 PM

So I'm a beginner with a crap teacher and an even worse book and now a take home test that's giving me the desire to punt things out my front door.

Can anyone give me direction on this? It's a little page with xhtml and javascript figuring area and cost of carpeting and a mouseover map (which I've got figured out).

function currency(amount) {

amount = Math.round(amount * 100); // convert amount value to pennies
amount = "" + amount; // convert amount to string
amount = amount.substring(0, amount.length - 2) + "." + amount.substring(amount.length - 2, amount.length);

return amount;

} // end currency function

var ctype = new Array("Berber", "Shag", "Astroturf", "Plush", "Commercial", "Loop Pile");
// var pic = new Array("assessment/north_america_1.gif","assessment/alaska.gif", "assessment/continental_us.gif", "assessment/greenland.gif", "assessment/mexico.gif");;

function calculate(long * wide) {

var firstname = document.areaform.fname.value;
var lastname = document.areaform.lname.value;
var long = document.areaform.long.value;
var wide = document.areaform.wide.value;

//
// Name checks
//
if (firstname == "") {
alert("Please enter your first name");
document.areaform.firstname.focus();
return false;
}

if (lastname == "") {
alert("Please enter your last name");
document.areaform.lastname.focus();
return false;
}

if (long.length <= 0){
alert("Please enter any amount above 1");
document.areaform.long.focus();
return false;
}

if (wide.length <= 0) {
alert("Please enter any amount above 1");
document.areaform.wide.focus();
return false;
}
else
return true;
calculate ?

//
// determine square footage of area to be carpeted
//

//
// for each type of carpet
//
for (ctr = 0; ctr < ???; ctr++) {

// check to see if this carpet type was selected and process accordingly

?

} // end for loop
alert (document.areaform.firstname + document.areaform.lastname + ''s cost for ' + calculate + ' square feet of ' + document.areaform.ctype + ' carpet is ' currency''.')">
} // end calculate()
//-->
</script>

new_guy217 · April 3rd, 2008, 06:01 PM

So what's your problem? I'll help ya, but you need to be more specific as to what you are having issues coding.

I'll give you something that jumped right out at me:

var long = document.areaform.long.value;

long is a type, so don't use it as a variable name.

Also, use CODE brackets. ya know, so code can look like this:

Code:

function calculate(long * wide) {

	var firstname = document.areaform.fname.value;
	var lastname = document.areaform.lname.value;
	var long = document.areaform.long.value;
	var wide = document.areaform.wide.value;

}

Also, post the code of the XHTML page. It's always helpful to have that info.

-ng217

snikker74 · April 3rd, 2008, 06:24 PM

There is brackets in there so I'm not sure what you're referring too. Mainly, the alert boxes and calculations aren't working (and I've followed his examples) I really don't know enough javascript to do this assignment, but we've moved on to PHP and I'm understanding that much better. I guess it's the object-oriented stuff that doesn't filter through.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www/w3/org/TR/xhtml/11/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Web Programming II − Assessment #2 − my name</title>

<style type="text/css">

body {font-size:0.8em; font-style: Verdana; color: navy; background-color:#6699cc;}

</style>

<script type="javascript">

</script>

</head>

<body>

<h2>Welcome to Bill's Carpet Warehouse</h2>
<form name="areaform" action="" method="get" onsubmit="alert (calculate)">

First Name: <input type="text" name="fname" /><br/><br/>

Last Name: <input type="text" name="lname" /><br/><br/>

Enter length of room: (in feet) <input type="text" name="long" /><br/><br/>

Enter width of room:  (in feet) <input type="text" name="wide" /><br/><br/>

<table cellspacing="8">
<tr>
<td>
<map name="north_america_map" id="north_america_map" onmouseout="north_america_1.gif">
<area shape="poly" coords="15,48,31,57,49,62,63,45,59,34,42,36,35,48" onmouseover="alaska.gif" target="_self" alt="Alaska" />
<area shape="poly" coords="133,152,129,142,132,131,137,126,136,118,14 1,110,141,104,145,100,141,97,137,103,131,107,128,1 07,119,105,114,100,106,103,83,100,60,96,56,105,53, 110,54,122,59,133,64,136,73,140,80,142,86,146,92,1 46,96,153,105,144,112,143,124,142,130,149" onmouseover="continental_us.gif" href="continental_us.gif" target="_self" alt="Continental 48" />
<area shape="poly" coords="61,137,65,150,71,159,80,160,81,169,95,175, 104,176,111,180,114,173,121,165,114,164,109,171,10 1,171,98,163,97,154,90,147,84,148,79,142,70,142" onmouseover="mexico.gif" href="mexico.gif" target="_self" alt="Mexico" />
<area shape="poly" coords="116,13,111,19,111,30,114,36,128,40,132,43, 135,50,146,54,153,55,145,42,144,34,145,26,135,20,1 19,11" onmouseover="greenland.gif" href="greenland.gif" target="_self" alt="Greenland" />

</map>
<p><img src="north_america_1.gif" usemap="#north_america_map" name="north_america" border="0" alt="North America" height="241" width="184" />
</p>
</td>

<td>

Carpet choices:<br/>
<select name="choices" size="5">

<option value="5.99" selected="selected">Berber</option>
<option value="3.25">Shag</option>
<option value="9.25">Astroturf</option>
<option value="1.50">Plush</option>
<option value="2.00">Commercial</option>
<option value="2.50">Loop Pile</option>

</select>
<br/><br/>

</td>
</tr>
</table>

<input type="submit" name="submit" value="Calculate Cost" onclick="display_alert(calculate * amount)" />

</form>

</body>
</html>

new_guy217 · April 4th, 2008, 01:44 AM

[c o d e] [/ c o d e] brackets, in your post man (take out the spaces)

Here's a sample that does what you want:

Code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  	<title>Web Programming II - Assessment #2 - my name</title>
  	
  	<script type="text/css">
			body {
				font-size: 12px;
				font-style: Verdana; 
				color: navy; 
				background-color:#6699cc;
			}
 		</script>
 		
 		<script type="text/javascript">
 		//** Make usefull comments, if you must.
		//** Not like "end currency function"
			
		//** Displays cost of carpet
			function showCost(){				
			//**Create object instances
				var tbFirstName = document.getElementById('tbFirstName');
				var tbLastName = document.getElementById('tbLastName');
				var tbLength = document.getElementById('tbLength');
				var tbWidth = document.getElementById('tbWidth');
				var slCarpet = document.getElementById('slCarpet');
				
			//**Other variables used
			  var strErr = "";
			  var strFirstName = tbFirstName.value;
			  var strLastName = tbLastName.value;
			  var strLength = tbLength.value;
			  var strWidth = tbWidth.value;			  
			  
			//**Construct error message
				//**It's a good idea to clear our invalid input
				if(strFirstName.length < 1){						
					strErr = "Please enter your first name\n"; 
				}
				if(strLastName.length < 1){
				  strErr += "Please enter your last name\n"; 
			 	}
				if(isNaN(strLength) == true || strLength.length < 1){ 
					strErr += "Please enter a valid length\n"; 
					tbLength.value = "";
				}
				if(isNaN(strWidth) == true || strWidth.length < 1){ 
					strErr += "Please enter a valid width\n"; 
					tbWidth.value = "";
				}		
				
			//**Handle errors
				if(strErr != ""){
					alert(strErr);
				} 
				else {
			//**Calculate cost of carpet	
					var numArea = tbLength.value * tbWidth.value;
					var numSqFt = slCarpet.options[slCarpet.selectedIndex].value;
					
					var numCost = numArea * numSqFt;
					
					//Convert into USD string
					var strCost = curUSD(numCost);
					var strSqFt = curUSD(numSqFt);
					
			//**Construct and show messsge
					var strMsg = "Customer: " + tbFirstName.value + " " + tbLastName.value + "\n";
					strMsg += "Carpet Style: " + slCarpet.options[slCarpet.selectedIndex].text + "\n\n";
					strMsg += "Square Footage: " + numArea + "\n";
					strMsg += "Cost per sqFt: " + strSqFt + "\n\n";			
					strMsg += "Total Cost: " + strCost;
				
					alert(strMsg);
				}
			} 		
		
		//**Convert number to USD string
			function curUSD(num){
				var strNum = "" + num;
				
				//Handle errors
				if(isNaN(num)){ return "curUSD Function :: Not a Number"; }
				
				//Add second 0 or round to 2 digits
				if(strNum.charAt(strNum.length - 2) == "."){
					strNum = num + "0";
				}
				else {
					strNum = Math.round(num * 100) / 100;
				}
							
				return "$" + strNum;
			}
		</script>
  </head>
  
  <body>
  	<h2>Welcome to Bill's Carpet Warehouse</h2>

		First Name: <input type="text" id="tbFirstName" maxlength="50" /><br/><br/>		
		Last Name: <input type="text" id="tbLastName" maxlength="50" /><br/><br/>		
		Enter length of room: <input type="text" id="tbLength" maxlength="6" /><br/><br/>		
		Enter width of room: <input type="text" id="tbWidth" maxlength="6" /><br/><br/>		
		
		<table cellspacing="8">
		
			<tr>
				<td>
					<map name="north_america_map" id="north_america_map" onmouseout="north_america_1.gif">
						<area shape="poly" coords="15,48,31,57,49,62,63,45,59,34,42,36,35,48" onmouseover="alaska.gif" target="_self" alt="Alaska" /> 
						<area shape="poly" coords="133,152,129,142,132,131,137,126,136,118,14 1,110,141,104,145,100,141,97,137,103,131,107,128,1 07,119,105,114,100,106,103,83,100,60,96,56,105,53, 110,54,122,59,133,64,136,73,140,80,142,86,146,92,1 46,96,153,105,144,112,143,124,142,130,149" onmouseover="continental_us.gif" href="continental_us.gif" target="_self" alt="Continental 48" />
						<area shape="poly" coords="61,137,65,150,71,159,80,160,81,169,95,175, 104,176,111,180,114,173,121,165,114,164,109,171,10 1,171,98,163,97,154,90,147,84,148,79,142,70,142" onmouseover="mexico.gif" href="mexico.gif" target="_self" alt="Mexico" />
						<area shape="poly" coords="116,13,111,19,111,30,114,36,128,40,132,43, 135,50,146,54,153,55,145,42,144,34,145,26,135,20,1 19,11" onmouseover="greenland.gif" href="greenland.gif" target="_self" alt="Greenland" />
					</map>
					
					<p>
						<img src="north_america_1.gif" usemap="#north_america_map" name="north_america" border="0" alt="North America" height="241" width="184" />
					</p>
				</td>
		
				<td>				
					Carpet choices:<br/>					
					<select id="slCarpet" size="5">
						<option value="5.99" selected="selected">Berber</option>
						<option value="3.25">Shag</option>
						<option value="9.25">Astroturf</option>
						<option value="1.50">Plush</option>
						<option value="2.00">Commercial</option>
						<option value="2.50">Loop Pile</option>
					</select>	
				</td>
			</tr>
		</table>
	
		<input type="button" id="btShowCost" value="Calculate Cost" onclick="showCost();" />		

  </body>
</html>

-ng217

snikker74 · April 4th, 2008, 12:08 PM

Thank you, Thank you, Thank you, Thank you! You saved my butt!