...

View Full Version : Script bug- a basic calculator



Tjk
12-21-2005, 04:59 PM
I recently wanted to use a calculator to make visitors inputting numbers into a form to be able to see the total they had inputted from the boxes. However when I try running it I get an error and I'm not sure what's up with it. Below is the script if anyone could help.

Basically what it's suppose to do is take the value of each text box and display the total



<body>
<script type="text/javascript">
<!-- Begin
function checking(){
leadstat= document.getElementById('lead');
warstat= document.getElementById('war');
intstat= document.getElementById('int');
polstat= document.getElementById('pol');
piestat= document.getElementById('pie');
ptd= document.getElementById('ptd');
if (leadstat!=''){
if (warstat!=''){
if(intstat !=''){
if(polstat !=''){
if (piestat !=''){
input1=eval(form.lead.value);
input2=eval(form.war.value);
input3=eval(form.intel.value);
input4=eval(form.pol.value);
input5=eval(form.pie.value);
var output= input1 + input2 + input3 + input4 + input5;
form.out.value=output;
if (ptd == output){
document.write
}
else{

}
}
else{

}
}
else{

}
}
else{

}
}
else{

}
}
else{

}
}
//-->
</script>
<form action="abc.php">
<tr>
<td><b>Lead:</b></td>
<td><INPUT type="text" size="3" name="lead" id="lead" size="10"></td>
</tr>
<br>
<tr>
<td><b>War:</b></td>
<td><INPUT type="text" size="3" name="war" id="war" size="10"></td>
</tr>
<br>
<tr>
<td><b>Int:</b></td>
<td><INPUT type="text" size="3" name="int" id="intel" size="10"></td>
</tr>
<br>
<tr>
<td><b>Pol:</b></td>
<td><INPUT type="text" size="3" name="pol" id="pol" size="10"></td>
</tr>
<br>
<tr>
<td><b>Pie:</b></td>
<td><INPUT type="text" size="3" name="pie" id="pie" size="10"></td>
</tr>
<br><br>
<tr>
<td><b>Points Used:</b></td>
<td><INPUT type="text" size="3" name="points" id="points" size="10" onChange="checking()"></td>
</tr>
</form>
</body>

Mr J
12-21-2005, 05:29 PM
Try this example


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
<!--
function checking(){
addMe=0
myForm=document.forms["myform"]

for(var i=0;i<myForm.length;i++){

if(myForm.elements[i].type=="text"&&myForm.elements[i].name!="points"){
addMe+=myForm.elements[i].value*1
}

}

myForm["points"].value=addMe

}

//-->
</script>

</HEAD>
<BODY>

<form name="myform">
<table>
<tr>
<td><b>Lead:</b></td><td><INPUT type="text" size="3" name="lead" id="lead" size="10"></td>
</tr>
<tr>
<td><b>War:</b></td><td><INPUT type="text" size="3" name="war" id="war" size="10"></td>
</tr>
<tr>
<td><b>Int:</b></td><td><INPUT type="text" size="3" name="int" id="intel" size="10"></td>
</tr>
<tr>
<td><b>Pol:</b></td><td><INPUT type="text" size="3" name="pol" id="pol" size="10"></td>
</tr>
<tr>
<td><b>Pie:</b></td><td><INPUT type="text" size="3" name="pie" id="pie" size="10"></td>
</tr>
<tr>
<td><b>Points Used:</b></td><td><INPUT type="text" size="3" name="points" id="points" size="10"></td>
</tr>
</table>
<input type="button" value="Test" onclick="checking()">

</form>

</BODY>
</HTML>

felgall
12-21-2005, 10:26 PM
Or get the value of each field eg.

leadstat= document.getElementById('lead').value;

Tjk
12-22-2005, 11:35 AM
If I wanted output the total to just a place in the page. IE as if I was writing



<p>Calc_output</p>


How would I set that up?

Mr J
12-22-2005, 02:58 PM
Replace this line

myForm["points"].value=addMe

with

document.getElementById("Calc_output").innerHTML=addMe

and put

<span id="Calc_output"></span>

where you want it to be shown in the page

Tjk
12-23-2005, 12:15 PM
Okay, I've managed to get it to this so far...



<script type="text/javascript">
<!--
function checking(){
addMe=0
myForm=document.forms["suform"]

for(var i=0;i<myForm.length;i++){

if(myForm.elements[i].type=="text"&&suform.elements[i].name!="points"){
addMe+=myForm.elements[i].value*1
}

}

document.getElementById("Calc_output").innerHTML=addme

}

//-->
</script>

<FORM method="POST" name="suform" action="test2.php">

<p><b>Points Distributed (so far):</b><span id="Calc_output" onChange="checking()"></span>

</form>
</form>


However where it should output its blank and doesn't seem to change at all. Could you tell me where I'm going wrong?

Also I've just left out the HTML boxes for lead, war, intel, pol, pie this time to keep the code small.

EDIT: Forgot to add, I may also later add text boxes on the page for a different function.

Mr J
12-23-2005, 03:33 PM
A small error in my last post, addme should have been addMe

In your post

if(myForm.elements[i].type=="text"&&suform.elements[i].name!="points"){

should be

if(myForm.elements[i].type=="text"&&myForm.elements[i].name!="points"){

You cannot apply the onchange event to a span



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
<!--
function checking(){
addMe=0
myForm=document.forms["myform"]

for(var i=0;i<myForm.length;i++){

if(myForm.elements[i].type=="text"&&myForm.elements[i].name!="points"){
addMe+=myForm.elements[i].value*1
}

}

document.getElementById("Calc_output").innerHTML=addMe


}

//-->
</script>

</HEAD>
<BODY>

<form name="myform">
<table>
<tr>
<td><b>Lead:</b></td><td><INPUT type="text" size="3" name="lead" id="lead" size="10"></td>
</tr>
<tr>
<td><b>War:</b></td><td><INPUT type="text" size="3" name="war" id="war" size="10"></td>
</tr>
<tr>
<td><b>Int:</b></td><td><INPUT type="text" size="3" name="int" id="intel" size="10"></td>
</tr>
<tr>
<td><b>Pol:</b></td><td><INPUT type="text" size="3" name="pol" id="pol" size="10"></td>
</tr>
<tr>
<td><b>Pie:</b></td><td><INPUT type="text" size="3" name="pie" id="pie" size="10"></td>
</tr>
<tr>
<td><b>Points Used:</b></td><td><INPUT type="text" size="3" name="points" id="points" size="10"></td>
</tr>
</table>
<input type="button" value="Test" onclick="checking()">

</form>
<BR><BR>
<span id="Calc_output" style="font-weight:bold">&nbsp;</span>

</BODY>
</HTML>

Tjk
12-23-2005, 03:58 PM
If the name of the form is suform then shouldn't the myform be replaced by it?

Mr J
12-23-2005, 06:08 PM
If the name of the form is suform then shouldn't the myform be replaced by it?

It has already been declared at line

myForm=document.forms["suform"]

and you changed only 1 instance of myForm

I just noticed an error on my part within my previous posts which I've corrected, I had a lowercase f instead of uppercase F

&&myform.elements[i].name
instead of
&&myForm.elements[i].name


Try this


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
<!--
function checking(){
addMe=0
myForm=document.forms["suform"]

for(var i=0;i<myForm.length;i++){

if(myForm.elements[i].type=="text"&&myForm.elements[i].name!="points"){
addMe+=myForm.elements[i].value*1
}

}

document.getElementById("Calc_output").innerHTML=addMe

}

//-->
</script>

</HEAD>
<BODY>

<form name="suform">
<table>
<tr>
<td><b>Lead:</b></td><td><INPUT type="text" size="3" name="lead" id="lead" size="10"></td>
</tr>
<tr>
<td><b>War:</b></td><td><INPUT type="text" size="3" name="war" id="war" size="10"></td>
</tr>
<tr>
<td><b>Int:</b></td><td><INPUT type="text" size="3" name="int" id="intel" size="10"></td>
</tr>
<tr>
<td><b>Pol:</b></td><td><INPUT type="text" size="3" name="pol" id="pol" size="10"></td>
</tr>
<tr>
<td><b>Pie:</b></td><td><INPUT type="text" size="3" name="pie" id="pie" size="10"></td>
</tr>
<tr>
<td><b>Points Used:</b></td><td><INPUT type="text" size="3" name="points" id="points" size="10"></td>
</tr>
</table>
<input type="button" value="Test" onclick="checking()">

</form>
<BR><BR>
<span id="Calc_output" style="font-weight:bold">&nbsp;</span>

</BODY>
</HTML>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum