help with javascript code.

SiDiuS · Apr 28, 2006

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"/>

Xenarchy · Apr 28, 2006

Ok this screams homework assignment.

I'll tell you that a lot of the reason your current code doesn't work is because you have lots of finger trouble. You are missing a closing bracket at the end of your computer function. When you define your onclick function it has an opening single quote but not closing single quote.

However, I was bored so here you go.

Code:

<html>
<head>
<title>p2-pt1.html</title>
</head>
<body>
	<script type="text/javascript">
	
	function changeColors() {
		// Change Styles
		document.body.style.color = document.getElementById("fgColor").value;
		document.body.style.background = document.getElementById("bgColor").value;
	}
	
	function computeCost() {
		// Declare Variables
		var radius = document.getElementById("radius").value;
		var noOfTop = document.getElementById("noOfTop").value;
		var costTop = document.getElementById("costTop").value;
		var price = document.getElementById("price").value;
		
		// Math
		sqInchPerSlice = (Math.PI * radius * radius)/8;
		ttlCost = price * (noOfTop * costTop);
		
		// Write Results
		document.getElementById("sqInchPerSlice").value = sqInchPerSlice;
		document.getElementById("ttlCost").value = ttlCost;
	}
	</script>
	<div>
	<form action="" method="post" onsubmit="javascript: return false;">
		<p>Radius: <input type="text" name="radius" id="radius" /></p>
		<p>Price: <input type="text" name="price" id="price" /></p>
		<p>Price Per Topping: <input type="text" name="costTop" id="costTop" /></p>
		<p>No. of Toppings: <input type="text" name="noOfTop" id="noOfTop" /></p>
		<p>Square In. Per Slice: <input type="text" name="sqInchPerSlice" id="sqInchPerSlice" /></p>
		<p>Total Cost: <input type="text" name="ttlCost" id="ttlCost" /></p>
		<p>Background Color: <input type="text" name="bgColor" id="bgColor" /></p>
		<p>Foreground Color: <input type="text" name="fgColor" id="fgColor" /></p>
		<p><input type="button" value="Compute" onclick="javascript: computeCost();"/>
		<input type="button" value="Change Colors" onclick="javascript: changeColors();" />
		<input type="reset" value="Reset" /></p>
	</form>
	</div>
</body>
</html>

help with javascript code.

SiDiuS

Weaksauce

Xenarchy

Limp Gawd