HTMLHelp Forums > Help with buttons

HTMLHelp Forums > Web Authoring > General Web Design

mrcheesete0

Dec 4 2008, 07:41 PM

I am making a simple calculator program for a school science fair project, and I used a CSS Button Maker program that I got fro ma google search, and when I try to change my buttons from the normal preset ones to the one I made, it disrupts the onClick, and makes he buttons not work. any idea on how to fix this?

Here is before the change to the cool buttons:

CODE

<HTML>
<HEAD>
<TITLE>Gavin's Science Fair Project</TITLE>

<script LANGUAGE="JavaScript">

function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A + B;
}

function CalculateDif(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A - B;
}

function CalculatePro(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A * B;
}

function CalculateQuo(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A % B;
}

function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Answer.value = "";
}

// end of JavaScript functions -->
</SCRIPT>

<style type="text/css">

input.groovybutton
{
   font-size:15px;
   width: 250px;
   height: 25px;
   font-family:Comic Sans MS,sans-serif;
   font-weight:bold;
   color:#000000;
   background-color:#FF0066;
   border-style:outset;
}

</style>

</HEAD>

<DIV ALIGN=CENTER>
<table border="10" bgcolor="#0C6AA1">
  <tr>
    <td><P><FONT SIZE="+3">Simple Calculator</FONT></P>

<FORM NAME="Calculator" METHOD="post">
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=15></P>
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=14></P>
<DIV ALIGN=CENTER><P><INPUT TYPE="button" VALUE="Add Numbers" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Subtract Numbers" name="SubButton" onClick="CalculateDif(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Multiply Numbers" name="MultButton" onClick="CalculatePro(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Divide Numbers" name="DivButton" onClick="CalculateQuo(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P></DIV>
<P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=18></P>
</FORM></td>
</DIV>

</BODY>
</HTML>

And here is after:

CODE

<HTML>
<HEAD>
<TITLE>Gavin's Science Fair Project</TITLE>

<script LANGUAGE="JavaScript">

function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A + B;
}

function CalculateDif(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A - B;
}

function CalculatePro(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A * B;
}

function CalculateQuo(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A % B;
}

function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Answer.value = "";
}

// end of JavaScript functions -->
</SCRIPT>

<style type="text/css">

input.groovybutton
{
   font-size:15px;
   width: 250px;
   height: 25px;
   font-family:Comic Sans MS,sans-serif;
   font-weight:bold;
   color:#000000;
   background-color:#FF0066;
   border-style:outset;
}

</style>

</HEAD>

<DIV ALIGN=CENTER>
<table border="10" bgcolor="#0C6AA1">
  <tr>
    <td><P><FONT SIZE="+3">Simple Calculator</FONT></P>

<FORM NAME="Calculator" METHOD="post">
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=15></P>
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=15></P>
<form name="groovyform">
<input
   type="button"
   name="AddButon"
   class="groovybutton"
   value="Add Numbers"
   onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"
   title="">
</form>
<form name="groovyform">
<input
   type="button"
   name="SubButton"
   class="groovybutton"
   value="Subtract Numbers"
   onClick="CalculateDif(this.form.input_A.value, this.form.input_B.value, this.form)"
   title="">
</form>
<form name="groovyform">
<input
   type="button"
   name="DivButton"
   class="groovybutton"
   value="Divide Numbers"
   onClick="CalculateQuo(this.form.input_A.value, this.form.input_B.value, this.form)"
   title="">
</form>
<form name="groovyform">
<input
   type="button"
   name="MultButton"
   class="groovybutton"
   value="Multiply Numbers"
   onClick="CalculatePro(this.form.input_A.value, this.form.input_B.value, this.form)"
   title="">
</form>
<form name="groovyform">
<input
   type="button"
   name="ClearButton"
   class="groovybutton"
   value="Clear Fields"
   onClick="ClearForm(this.form)"
   title="">
</form>
<P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=18></P>
</FORM></td>
</DIV>

</BODY>
</HTML>

If anyone can help with this, It would be greatly appreciated.

pandy

Dec 5 2008, 02:19 AM

In the original HTML there is is only one form and the script is written to work with that. In your page you have created a form for each single input. Additionally you have nested forms inside each other (that's a no-no) and you have given them all the same name. A name must be unique.

Do as in the original and put everything in the same form and it should work.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.