Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Tjk
    Tjk is offline
    New Coder
    Join Date
    Aug 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Script bug- a basic calculator

    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

    Code:
    <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>
    Last edited by Tjk; 12-21-2005 at 05:02 PM. Reason: Ammendment to script

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try this example

    PHP Code:
    <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> 
    Last edited by Mr J; 12-23-2005 at 06:13 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Or get the value of each field eg.

    leadstat= document.getElementById('lead').value;
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Tjk
    Tjk is offline
    New Coder
    Join Date
    Aug 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I wanted output the total to just a place in the page. IE as if I was writing

    Code:
    <p>Calc_output</p>
    How would I set that up?

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    Last edited by Mr J; 12-23-2005 at 03:34 PM. Reason: Changed addme to addMe
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    Tjk
    Tjk is offline
    New Coder
    Join Date
    Aug 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I've managed to get it to this so far...

    Code:
    <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.
    Last edited by Tjk; 12-23-2005 at 01:05 PM.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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


    PHP Code:
    <HTML
    <
    HEAD
    <
    TITLE>Document Title</TITLE

    <
    script type="text/javascript"
    <!--  
    function 
    checking(){
    addMe=
    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*




    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> 
    Last edited by Mr J; 12-23-2005 at 06:12 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    Tjk
    Tjk is offline
    New Coder
    Join Date
    Aug 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If the name of the form is suform then shouldn't the myform be replaced by it?

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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

    PHP Code:
    <HTML>  
    <
    HEAD>  
    <
    TITLE>Document Title</TITLE>  

    <
    script type="text/javascript"
    <!--  
    function 
    checking(){ 
    addMe=
    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*




    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> 
    Last edited by Mr J; 12-23-2005 at 06:22 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •