help with javascript code.


Mar 6, 2003
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.

<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


//compute results

sqInchPerSlice = (Math.PI * radius * radius)/8
ttlCost = price * (noOfTop * costTop)

//write results to the form
document.stdform.sqInchPerSlice.value = sqInchPerSlice




<form id = "stdform" action = "">

Radius: <input type = "text" name = "radius"/>

Price: <input type = "text" name = "price"/>
Price Per Topping: <input type = "text" name = "costTop"/>

No. of Toppings: <input type = "text" name = "noOfTop"/>
Square In. Per Slice: <input type = "text" name = "sqInchPerSlice"/>
Total Cost: <input type = "text" name = "ttlCost"/>

Background Color: <input type = "text" name = "bgColor"/>
Foreground Color: <input type = "text" name = "fgColor"/>

<input type="button" value="Compute" onclick='computeCosts(')"/>
<input type="button" value="Change Colors" onclick="window.location.reload()"/>
<input type="reset" value="Reset"/>
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.

	<script type="text/javascript">
	function changeColors() {
		// Change Styles = document.getElementById("fgColor").value; = 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;
	<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>