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

    Newbie needs a little help!

    Hi there,

    I am new to JS and as such I am trying out a few things - just to get a basic understanding (I like to know how things work!)

    I have a simple webpage which I have added a JS VAT calculator to - very very basic, just enter either a inc or ex VAT amount and it calculates - now I want to try and expand this further by adding the VAT amount underneath the input fields, so I get:

    Inclusive of VAT:
    Exclusive of VAT:
    Amount of VAT:

    The Inclusive and Exclusive calculation works perfectly but I can't understand how to get the final "Amount of VAT" to show?

    Here is my Code:

    Code:
    Enter your inclusive or exclusive values to calculate UK VAT (20%).<br /><br /> Amount Inclusive of VAT <input id="txt1" onkeyup="calcE()" type="text" size="6" name="txt1" /> Amount Exclusive of VAT <input id="txt2" onkeyup="calcI()" type="text" size="6" name="txt2" /> VAT amount = <p id="Totalvat"></p>
    <script type="text/javascript">
    function calcE() {
    var incVAT = parseFloat(document.getElementById("txt1").value);
    if (incVAT) {
    if (isNaN(incVAT)) {
    alert ("Invalid Value!")
    }
    }
    excVAT = incVAT/1.20;
    
    document.getElementById("txt2").value = excVAT.toFixed(2);
    }
    
    function calcI() {
    var excVAT = parseFloat(document.getElementById("txt2").value);
    if (excVAT) {
    if (isNaN(excVAT)) {
    alert ("Invalid Value!")
    }
    }
    incVAT = excVAT * 1.20;
    document.getElementById("txt1").value = incVAT.toFixed(2);
    
    }
    
    function totalvat() {
    var totalv = incVAT - excVAT;
    document.getElementById('Totalvat').innerHTML = totalv;
    
    }
    </script>
    Anyone willing to give a total newbie a few pointers on why it wont' work?

    Thanks

    Tony

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 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>
    </head>
    
    <body>
    Enter your inclusive or exclusive values to calculate UK VAT (20%).<br /><br />
    Amount Inclusive of VAT <input id="txt1" onkeyup="calcE()" type="text" size="6" name="txt1" />
    Amount Exclusive of VAT <input id="txt2" onkeyup="calcI()" type="text" size="6" name="txt2" />
    VAT amount = <p id="Totalvat"></p>
    <script type="text/javascript">
    
    function calcE() {
    var incVAT = parseFloat(document.getElementById("txt1").value);
    if (isNaN(incVAT)) {
    alert("Invalid Value!");
    return;
    }
    excVAT = incVAT/1.20;
    document.getElementById("txt2").value = excVAT.toFixed(2);
    totalvat(incVAT,excVAT);
    }
    
    function calcI() {
    var excVAT = parseFloat(document.getElementById("txt2").value);
    if (isNaN(excVAT)) {
    alert("Invalid Value!");
    return;
    }
    incVAT = excVAT * 1.20;
    document.getElementById("txt1").value = incVAT.toFixed(2);
    totalvat(incVAT,excVAT);
    }
    
    function totalvat(incVAT,excVAT) {
    var totalv = incVAT - excVAT;
    document.getElementById('Totalvat').innerHTML = totalv.toFixed(2);
    
    }
    </script>
    </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/

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    You do not call your totalv() function.

    Prefer onblur to onkeyup here.

    Code:
    <!DOCTYPE html>
    <head>
    <body>
    Enter your inclusive or exclusive values to calculate UK VAT (20%).<br /><br /> Amount Inclusive of VAT <input id="txt1" onblur="calcE()" type="text" size="6" name="txt1" /> Amount Exclusive of VAT <input id="txt2" onblur="calcI()" type="text" size="6" name="txt2" /> VAT amount = <input type = "text"  id="Totalvat" size = "6">
    
    <script type="text/javascript">
    function calcE() {
    var incVAT = parseFloat(document.getElementById("txt1").value);
    if (isNaN(incVAT)) {
    alert ("Invalid Value!");
    document.getElementById("txt1").value = "";  // clear the error field
    return false;  // and stop the script now
    }
    var excVAT = incVAT/1.20;
    totalvat(incVAT,excVAT);
    }
    
    function calcI() {
    var excVAT = parseFloat(document.getElementById("txt2").value);
    if (isNaN(excVAT)) {
    alert ("Invalid Value!");
    document.getElementById("txt2").value = "";
    return false;
    }
    var incVAT = excVAT * 1.20;
    totalvat(incVAT,excVAT);
    }
    
    function totalvat(incVAT, excVAT) {
    incVAT = incVAT.toFixed(2);
    excVAT = excVAT.toFixed(2);
    document.getElementById("txt1").value = incVAT;
    document.getElementById("txt2").value = excVAT;
    var totalv = Number(incVAT) - Number(excVAT);  // subtraction performed on numbers to 2DP
    document.getElementById('Totalvat').value = totalv.toFixed(2);
    }
    
    </script>
    
    </body> 
    </html>

    Note that .toFixed(2) results in a string value and may result in a possible apparant rounding error unless the values are changed back to numbers before the subtraction is performed.

    "The best horse won, and that's all you can ask in any sport". - Racing commentator
    Last edited by Philip M; 05-28-2014 at 11:58 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.

  • #4
    New to the CF scene
    Join Date
    May 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much... I appreciate your time to help me


  •  

    Posting Permissions

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