# How to perform calculation

I want to print subtotal from Line Total and want to show additon without using button and with using onchange but onchange() is not working,
Want to print addition of Line Total and print addition in subtotal and want to perform tax calculation and show the output in Total How to do?

``````<html>
<tr align="right">
<td colspan="3" class="noBorder">

<b><font size="4px;">Subtotal<br>Tax (%)
</font></b>
</td>

<td valign="middle" align="center" width="100%">
<input type="text" id="subtotal" name="subtotal" class="subtotal" value="0.00" onclick="result(this.form)" style="border:none;width: 100%;"/>
<input type="text" id="tax" class="tax" name="tax" style="border:none;width: 100%;">
</td>
</tr>
</html>

<script>
function result(theForm)
{
var n1=parseInt(document.getElementById('linetotal1').selectedIndex)+1;
var n2=parseInt(document.getElementById('linetotal2').selectedIndex)+1;
var n3=parseInt(document.getElementById('linetotal3').selectedIndex)+1;
var n4=parseInt(document.getElementById('linetotal4').selectedIndex)+1;
var n5=parseInt(document.getElementById('linetotal5').selectedIndex)+1;

if (isNaN(n1)) n1=0;
if (isNaN(n2)) n2=0;
if (isNaN(n3)) n3=0;
if (isNaN(n4)) n4=0;
if (isNaN(n5)) n5=0;
var subtotal=(n1+n2+n3+n4+n5);
document.getElementById("subtotal").value=subtotal;
}
</script>
``````
###### Who is Participating?

Commented:
1. Highlight code
2. Click the CODE button in the toolbar

Please post more of your code - you have left out some key bits (the select's, the line items) these are important to solving the problem.

I expect that there is a much simpler solution to your problem - your JavaScript code is overly verbose - but to give you correct code we need a proper context.

If you have a link to a sample page that would be first prize.
1

Commented:
assuming you got elements like:

``````<select id="linetotal1">
..
<select id="linetotal2">
..
<select id="linetotal3">
...
``````

then you should call that function by adding:

<select id="linetotal1" onchange="result(this.form)">

please also note that you actually are not using theForm in your function, you may consider to remove that from your function when necessary.
1

Commented:
Check this code without onclick atrr in the input elements.
``````<!DOCTYPE html>
<html>
<title>HTML, CSS and JavaScript demo</title>
<body>
<!-- Start your code here -->

<tr align="right">
<td colspan="3" class="noBorder">

<b><font size="4px;">Subtotal<br>Tax (%)
</font></b>
</td>

<td valign="middle" align="center" width="100%">
<input type="text" id="subtotal" name="subtotal" class="subtotal" value="1.00"       style="border:none;width: 100%;"/>
<input type="text" id="tax" class="tax" name="tax" style="border:none;width: 100%;">
</td>
<td valign="middle" align="center" width="100%">
<input type="text" id="subtotal" name="subtotal" class="subtotal" value="5.00"       style="border:none;width: 100%;"/>
<input type="text" id="tax" class="tax" name="tax" style="border:none;width: 100%;">
</td>
<td valign="middle" align="center" width="100%">
<input type="text" id="subtotal" name="subtotal" class="subtotal" value="a"       style="border:none;width: 100%;"/>
<input type="text" id="tax" class="tax" name="tax" style="border:none;width: 100%;">
</td>
<td valign="middle" align="center" width="100%">
<input type="text" id="subtotal" name="subtotal" class="subtotal" value="4.00"       style="border:none;width: 100%;"/>
<input type="text" id="tax" class="tax" name="tax" style="border:none;width: 100%;">
</td>
</tr>

<script>
var subTotal=document.getElementsByClassName("subtotal");
var n=[];
for(var i=0;i<subTotal.length;i++){
if(subTotal[i].value===''){
subTotal[i].value=0;
}
n.push(parseInt(subTotal[i].value));
var total=0;
for(var i in n) { total += n[i]; }

});

}
</script>
<!-- End your code here -->
</body>
</html>
``````
1

Commented:
hope this helps

``````<!DOCTYPE html>
<html>
<title>HTML, CSS and JavaScript demo</title>
<body>
<!-- Start your code here -->

<table>
<tr>
<td>Quantity</td>
<td>Unit Price</td>
<td>Total</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td class="val">25</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td class="val">25</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td class="val">25</td>
</tr>
<tr>
<td colspan="2" id="tot" >Total</td>
</tr>
</table>
<input type="button" name="abc" id="abc" value="click" onclick="calculate()" />
<script>
function calculate()
{
var html = document.querySelectorAll(".val");
var tot = 0;
for (i = 0; i < html.length; ++i) {
tot = tot + parseInt(html[i].innerHTML);
}

document.getElementById("tot").innerHTML = tot;
}

</script>
<!-- End your code here -->
</body>
</html>
``````
1

IT Engineering studentAuthor Commented:
It's working Thank you all
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.