Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Newbie needs a little help!

1. ## 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)) {
}
}
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)) {
}
}
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

• 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">

<title></title>

<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)) {
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)) {
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>```

• You do not call your totalv() function.

Prefer onblur to onkeyup here.

Code:
```<!DOCTYPE html>
<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)) {
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)) {
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

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