Ok this a simple form I'm trying to do. I can do everything correct but I just can't seem to get the "compute" to work. Or the background colors to change. If someone could just point me in the right direction I would appreciate it. I've gone over it like 10 times and can't figure out the problem. Here is the code for the form.
<title>p2-pt1.html</title>
<script type="text/javascript">
function changeColors() {
var color = document.stdform.bgColor.value
document.bgColor = color
document.fgColor = document.stdform.fgColor.value
}
function computeCosts() {
var radius, price, noOfTop, costTop, sqInchPerSlice, ttlCost, bgColor, fgColor // user inputs
//fetch user inputs from the form
radius = document.stdform.radius.value
price = document.stdform.price.value
noOfTop = document.stdform.noOfTop.value
costTop = document.stdform.costTop.value
sqInchPerSlice = document.stdform.sqInchPerSlice.value
ttlCost = document.stdform.ttlCost.value
bgColor = document.stdform.bgColor.value
fgColor = document.stdform.fgColor.value
}
with(document.stdform) {
radius = radius.value
price = price.value
noOfTop = noOfTop.value
costTop = costTop.value
sqInchPerSlice = sqInchPerSlice.value
ttlCost = ttlCost.value
}
//with
//compute results
sqInchPerSlice = (Math.PI * radius * radius)/8
ttlCost = price * (noOfTop * costTop)
//write results to the form
document.stdform.sqInchPerSlice.value = sqInchPerSlice
</script>
</head>
<body>
<form id = "stdform" action = "">
Radius: <input type = "text" name = "radius"/>
<br/>
<br/>
Price: <input type = "text" name = "price"/>
<br/>
<br/>
Price Per Topping: <input type = "text" name = "costTop"/>
<br/>
<br/>
No. of Toppings: <input type = "text" name = "noOfTop"/>
<br/>
<br/>
Square In. Per Slice: <input type = "text" name = "sqInchPerSlice"/>
<br/>
<br/>
Total Cost: <input type = "text" name = "ttlCost"/>
<br/>
<br/>
Background Color: <input type = "text" name = "bgColor"/>
<br/>
<br/>
Foreground Color: <input type = "text" name = "fgColor"/>
<br/>
<br/>
<hr/>
<br/>
<input type="button" value="Compute" onclick='computeCosts(')"/>
<br/>
<input type="button" value="Change Colors" onclick="window.location.reload()"/>
<br/>
<input type="reset" value="Reset"/>
<title>p2-pt1.html</title>
<script type="text/javascript">
function changeColors() {
var color = document.stdform.bgColor.value
document.bgColor = color
document.fgColor = document.stdform.fgColor.value
}
function computeCosts() {
var radius, price, noOfTop, costTop, sqInchPerSlice, ttlCost, bgColor, fgColor // user inputs
//fetch user inputs from the form
radius = document.stdform.radius.value
price = document.stdform.price.value
noOfTop = document.stdform.noOfTop.value
costTop = document.stdform.costTop.value
sqInchPerSlice = document.stdform.sqInchPerSlice.value
ttlCost = document.stdform.ttlCost.value
bgColor = document.stdform.bgColor.value
fgColor = document.stdform.fgColor.value
}
with(document.stdform) {
radius = radius.value
price = price.value
noOfTop = noOfTop.value
costTop = costTop.value
sqInchPerSlice = sqInchPerSlice.value
ttlCost = ttlCost.value
}
//with
//compute results
sqInchPerSlice = (Math.PI * radius * radius)/8
ttlCost = price * (noOfTop * costTop)
//write results to the form
document.stdform.sqInchPerSlice.value = sqInchPerSlice
</script>
</head>
<body>
<form id = "stdform" action = "">
Radius: <input type = "text" name = "radius"/>
<br/>
<br/>
Price: <input type = "text" name = "price"/>
<br/>
<br/>
Price Per Topping: <input type = "text" name = "costTop"/>
<br/>
<br/>
No. of Toppings: <input type = "text" name = "noOfTop"/>
<br/>
<br/>
Square In. Per Slice: <input type = "text" name = "sqInchPerSlice"/>
<br/>
<br/>
Total Cost: <input type = "text" name = "ttlCost"/>
<br/>
<br/>
Background Color: <input type = "text" name = "bgColor"/>
<br/>
<br/>
Foreground Color: <input type = "text" name = "fgColor"/>
<br/>
<br/>
<hr/>
<br/>
<input type="button" value="Compute" onclick='computeCosts(')"/>
<br/>
<input type="button" value="Change Colors" onclick="window.location.reload()"/>
<br/>
<input type="reset" value="Reset"/>