• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Help with JavaScript homework please?

Fraggable

Platinum Member
The assignment is to create a simple form that someone would use to order a desk, with options to customize how many drawers, what kind of finish, that kind of thing. Then you click a 'calculate' button and the javaScript calculates the total cost of the desk and returns the value. Right now I've got the form completed, and am trying to make it calculate the square footage of the desk using the inputted width and depth values. Here's the code I have so far:


<html>
<head>
<title>Brion Bastian's JavaScript homework site</title>

<script language="javascript" type="text/javascript">

function calculatesqft(a,b) {
return a*b
}


</script>

</head>
<body bgcolor="#ffffff">

<form>

Size</br>
Width: <input type="text" size="10" name="width" /></br>
Depth: <input type="text" size="10" name="depth" /></br>
Price per sq. ft. <input type="text" size="10" name="pricesqft" /></br>
Total: <input type="text" size="10" name="total" /></br></br>
Drawers</br>
<input type="checkbox" name="OneDrawer" value="no" />One Drawer</br>
<input type="checkbox" name="TwoDrawer" value="no" />Two Drawer</br>
<input type="checkbox" name="ThreeDrawer" value="no" />Three Drawer</br>
<input type="checkbox" name="FourDrawer" value="no" />Four Drawer</br>
<input type="checkbox" name="FiveDrawer" value="no" />Five Drawer</br></br>
Veneer</br>
<input type="checkbox" name="Plastic" value="yes" />Plastic</br>
<input type="checkbox" name="Oak" value="no" />Oak</br>
<input type="checkbox" name="SolidOak" value="no" />Solid Oak</br></br>
Hardware</br>
<input type="checkbox" name="PlasticHardware" value="yes" />Plastic</br>
<input type="checkbox" name="MetalHardware" value="no" />metal</br></br>

<input type="text" name="total">
<input type="submit" value="Calculate" on_Click=alert(calculatesqft(5,6))>

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

___________________________________________
 
I know absolutely nothing about javascript, but looking at your code two things come to mind from a programming perspective:

1) Scope. Inside of your function you're declaring width and depth vars. These might be eclipsing input fields you have with those same names
2) If, in the js lanaguage, you can't directly access the page elements, you'll need to add parameters and a return value to the function, and then assign that rv to the appropriate field outside of your script.

I'm leaning towards #1.

Oh yeah, the forums don't want any imbedded trouble in posts, so they censor out certain inputs.
 
I updated the OP with slightly different code. The cope I posted works, it pops up a box with '30' in it, as it should. Now the challenge is to substitute the 5 and 6 for the values of 'width' and 'depth'.

I don't know of there being a problem with using the words 'width' and 'depth' to name fields, though I'll try it with other names too.

EDIT: Ok, there is some problem with using 'width' and 'depth' for names. I changed them to 'w' and 'd' and used w.value and d.value to do the calculation, and it works.

Thanks for your help diegoalcatraz, you pointed me in the right direction.
 
Back
Top