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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    HTML form and Javascript

    Hello
    I have attempted to make a Simple Interest Calculator using html forms and javascript and got stuck some where.Here the main problem is alert box does not pop up when i click the calculate interest button

    Code:
    <html>
    <head>Calculator Simple Interest
    <script>
    var p=document.getElementById("pa");
    var n=document.getElementById("ny");
    var r=document.getElementById("ri");
    function si()
    {
    var s;
    s=(p*n*r)/100;
    alert("Total Amount is"+s);
    }
    function ta()
    {
    var t;
    t=p+s;
    alert("Total Amount is"+t);
    }
    </script>
    </head>
    <title>Simple Interest Calculator</title>
    <body>
    <form>
    <b>Principal Amount</b><input type="number" id="pa">
    <b>No. of years</b><input type="number" id="ny">
    <b>Rate of interest</b><input type="number" id="ri">
    <input type="button" onclick="si()" value="Calculate Interest">
    <input type="button" onclick="ta()" value="Final Amount">
    </form>
    </body>
    </html>
    Last edited by adityavishnu; 11-13-2012 at 08:09 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Your main problems are that you are trying to get the values of p, n and r as soon as the page loads (when they do not even exist at that moment) instead of when the function runs.
    Also, the values calculated by one function are not somehow retained for use by the second function - you must work out the interest again. Once a function ends the values of any local variables ae lost.
    Also, values entered by the user are strings unless converted to numbers.

    Code:
    <html>
    <head>Calculator Simple Interest
    <script>
    function si() {
    var p=Number(document.getElementById("pa").value);
    var n=Number(document.getElementById("ny").value);
    var r=Number(document.getElementById("ri").value);
    var s=p*n*r/100;
    alert("Total Interest Amount is "+s.toFixed(2));
    }
    function ta() {
    var p=Number(document.getElementById("pa").value);
    var n=Number(document.getElementById("ny").value);
    var r=Number(document.getElementById("ri").value);
    var s=p*n*r/100;
    var t = p+s;
    alert("Total Amount Payable is "+t.toFixed(2));
    }
    </script>
    </head>
    <title>Simple Interest Calculator</title>
    <body>
    <form>
    <b>Principal Amount</b><input type="number" id="pa">
    <b>No. of years</b><input type="number" id="ny">
    <b>Rate of interest</b><input type="number" id="ri">
    <input type="button" onclick="si()" value="Calculate Interest">
    <input type="button" onclick="ta()" value="Final Amount">
    </form>
    </body>
    </html>
    "What's the three words you never want to hear while making love? Honey, I'm home." - Ken Hammond.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    adityavishnu (11-13-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hey ,ma idea is to declare p,n,r as global variable and then use it in functions to calculate simple interest and total amount
    Last edited by adityavishnu; 11-12-2012 at 09:42 AM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by adityavishnu View Post
    hey ,ma idea is to declare p,n,r as global variable and then use it in functions to calculate simple interest and total amount
    Yes, you could do that, but many people think it is a good idea to avoid using global variables as far as possible. And in this case it would not achieve anything as if the user clicked "Final Amount" before clicking "Calculate Interest" then an error would be generated. Can you see why?
    Last edited by Philip M; 11-12-2012 at 10:57 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I don't know how to declare it as global variable but whats the matter with this case if p n r are declared globally

    Code:
    var p=Number(document.getElementById("pa").value);
    var n=Number(document.getElementById("ny").value);
    var r=Number(document.getElementById("ri").value);
    function si() 
    {
    var s=p*n*r/100;
    alert("Total Interest Amount is "+s.toFixed(2));
    }
    
    function ta() {
    var s=p*n*r/100;
    var t = p+s;
    alert("Total Amount Payable is "+t.toFixed(2));
    }

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by adityavishnu View Post
    I don't know how to declare it as global variable but whats the matter with this case if p n r are declared globally

    Code:
    var p=Number(document.getElementById("pa").value);
    var n=Number(document.getElementById("ny").value);
    var r=Number(document.getElementById("ri").value);
    function si() 
    {
    var s=p*n*r/100;
    alert("Total Interest Amount is "+s.toFixed(2));
    }
    
    function ta() {
    var s=p*n*r/100;
    var t = p+s;
    alert("Total Amount Payable is "+t.toFixed(2));
    }
    If you do not know how to declare p, n and r as global variables then indeed you may not be able to see the problem.

    Declare p, n and r as global variables (look up how to do this very basic thing) and then test your script using alerts to inspect the value of the various variables as the script executes. And/or use your error console to identify errors.

    I'll say it one more time - Your main problems are that you are trying to get the values of p, n and r as soon as the page loads (when they do not even exist at that moment) instead of when the function runs.

    I gave you a full solution in Post #2. If that displeases you in some way, then that is OK by me. But if you are unwilling to take advice then it is pointless asking for help so you must proceed on your own.
    Last edited by Philip M; 11-12-2012 at 12:05 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hey i understood what u said....
    kindly tell me which error console to use...that will make it very much easy to program
    thank you

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by adityavishnu View Post
    hey i understood what u said....
    kindly tell me which error console to use...that will make it very much easy to program
    thank you
    All browsers now have a full JavaScript debugger built in (except Firefox which has several extensions available to add a debugger such as Firebug). So you can even go beyond the error console and step through your code one command at a time and see exactly what gets updated and what the values it uses are.

    Press F12 in IE and Chrome to access the developer tools.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

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