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>

Open in new window

Nikhil DangeIT Engineering studentAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Code tags added.
Please use code tags for your code snippets - it makes your code easier to read and refer to. To add code tags
1. Highlight code
2. Click the CODE button in the toolbar
CodeTags.jpg
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
 
Ryan ChongConnect With a Mentor Commented:
assuming you got elements like:

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

Open in new window


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
 
Leonidas DosasConnect With a Mentor Commented:
Check this code without onclick atrr in the input elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<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));  
   subTotal[i].addEventListener('click',function(e){
    var total=0;
    for(var i in n) { total += n[i]; }
  
    alert('total is: '+total);
     
    });
  
}
  </script>
<!-- End your code here -->
</body>
</html>

Open in new window

1
 
Vijaya KumarConnect With a Mentor Commented:
hope this helps

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<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>

Open in new window

1
 
Nikhil DangeIT 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.

All Courses

From novice to tech pro — start learning today.