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 7 of 7

Thread: Calculations!

  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Location
    London
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Calculations!

    Afternoon

    I have just started learning JavaScript and I'm trying to create a calculator that subtracts two values in an input field and then divides it by 4. I would like the result to be displayed on another field whenever the user clicks in "Calculate". However, whenever I try clicking in Calculate nothing happens.

    This is my code:

    Code:
            
            <form name "calc" >
            
            Life expectancy 
           <input name="average" value="0" maxlength="3">
            
           <p> Age
           <input name="age" value="0" maxlength="3"> 
           </p> 
           
           <p>
           <input type="button" value="Calculate" onClick="calculation()" />
           </p>
    
           <p>
           Result
           <input type="text" name="result" size="10" disabled/>
           </p>
           
           </form>
    Would really appreciate if someone could help me out!
    Thank you!

  • #2
    New to the CF scene
    Join Date
    Jun 2013
    Location
    London
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh and the function I have used is

    Code:
    <script>
                
        function calculation (){
            
        var age, average, total; 
        average = parseInt(document.calc.getElementById("average").value, 10);
        age = parseInt(document.calc.getElementById("age").value, 10);
        total = average - age;
        document.calc.getElementById("result") = total / 4; 
    
        }
                    
        </script>
    Thank you again

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function calculation(button,le,ag,re,by){
     var frm=button.form;
     if (frm){
      var le=frm[le],ag=frm[ag],re=frm[re]; // convert the strings to form elements
      if (le&&ag&&re){
       le=(le.value).replace(/\D/g,''); // remove none numbers
       le.value=le||0;
       ag=(ag.value).replace(/\D/g,'');
       ag.value=le||0;
       re.value=(le-ag)*(by||1);  // le and ag are strings but subtraction or multiplication converts them to numbers
      }
     }
    }
    
    /*]]>*/
    </script></head>
    
    <body>
            <form name="calc" >
    
            Life expectancy
           <input name="average" value="0" maxlength="3">
    
           <p> Age
           <input name="age" value="0" maxlength="3">
           </p>
    
           <p>
           <input type="button" value="Calculate" onClick="calculation(this,'average','age','result',4)" />
           </p>
    
           <p>
           Result
           <input type="text" name="result" size="10" disabled/>
           </p>
    
           </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    The name attribute is deprecated (except on form controls) and should therefore not be used on the form element. Use id instead and address the form with document.getElementById('calc'). Also, use labels with your inputs.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    In other words, if you change to
    Code:
    <form id="calc">
    then your JS code could be:
    Code:
    <script type="text/javascript">
                
    function calculation ()
    {
        var form, age, average, total; 
        form = document.getElementById("calc");        
        average = parseInt( form.average.value, 10);
        age = parseInt(form.age.value,10);
        total = average - age;
        form.result.value = total / 4; 
    
    }
                    
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,609
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You can leave out the two lines calling parseInt to convert the numbers - the subtraction on the following line will do that anyway.
    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.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Well, you can't leave out the lines. You can just leave out the parseInt() call.

    Or you could leave out the lines by some minor rewriting:
    Code:
    <script type="text/javascript">
                
    function calculation ()
    {
        var form = document.getElementById("calc");        
        form.result.value = ( form.average.value - form.age.value ) / 4; 
    
    }
                    
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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