# HTML and Javascript for percentage calculator



## beastboy (Nov 18, 2013)

Hi , 

I am looking for code of a percentage calculator i browsed internet and got codes  but i couldnt include the functionality i was looking for though mine was more simpler approach , i was not getting the coding can someone help me out from it.

in the code the functionality i want is one input box one output box and one calculate button between the input and output box , i should feed the input number and at the output i should get 3% of the Input number when i click calculate button , 

i got a code from internet but i couldnt tweak it to suit my need (lack in coding skills) , so please help me out

<SCRIPT language=JavaScript>
<!--
//Script by Tom Richardson Jr.
//If you have any questions, e-mail me at gooftroop@geocities.com
//or visit mt web site at *home.rmci.net/gooftroop
//For this script and more, visit JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop


function perc1() {
 a = document.form1.a.value/100;
 b = a*document.form1.b.value;
 document.form1.total1.value = b
 }
function perc2() {
 a = document.form1.c.value;
 b = document.form1.d.value;
 c = a/b;
 d = c*100;
 document.form1.total2.value = d
 }
//-->
</SCRIPT>

<FORM name=form1>
<TABLE cellSpacing=1 cellPadding=1 border=1>
  <TBODY>
  <TR>
    <TD align=middle colSpan=3><B><FONT size=4>Percentage Calculator</FONT></B> 
      </TD>
  <TR>
    <TD>What is <INPUT size=5 name=a>*% of <INPUT size=5 name=b>?</TD>
    <TD>Answer: <INPUT maxLength=40 size=5 name=total1></TD>
    <TD><INPUT onclick=perc1() type=button value=Calculate></TD>
  <TR>
    <TD><INPUT size=5 name=c>*is what percent of <INPUT size=5 
name=d>?</TD>
    <TD>Answer: <INPUT size=5 name=total2>*%</TD>
    <TD><INPUT onclick=perc2() type=button value=Calculate></TD>
  <TR>
    <TD align=middle 
colSpan=3><INPUT type=reset value=Reset></TD></TR></TBODY></TABLE></FORM>


this code is having many boxes i dont want that much
what i tried ending up from this is this but it is not working

<h2>

<!-- Begin
function calc1(form) {
a = form.a.value;
b = a*(3/100);
form.total1.value = b;
}

//  End -->
</script>
</h2>
<body><center>
<form name="form1">
<table border=1 cellpadding=4 cellspacing=1>
<tr>

<td align=center>What is
<input type="text" name="a" size=5>

<td align=center><input type="button" value="Calculate"
onClick="calc1(this.form)">
</td>

% of <input type="text" name="b" size=5>?</td>
<td align=center>Answer: <input type="text" name="total1"
size=5 maxlength=40></td>

</tr>
</table>
</form>
</center></body>

regards,
beastboy


----------



## Amithansda (Nov 19, 2013)

Let say, 
1.your input box is like this 
	
	



```
<input type="text" id="inputBox"/>
```
2.Your output box is like this 
	
	



```
<input type="text" id="outputBox"/>
```
3.Your Button is like this 
	
	



```
<input type="button" id="ButtonPerc" onclick="calcPerc()"/>
```

then the function calcPerc() should be like this 

```
function calcPerc() {
    var input = document.getElementById("inputBox").value;
    document.getElementById("outputBox").value = (input / 100) * 3;
    }
```


----------



## lywyre (Nov 19, 2013)

That should do.
If you still have trouble figuring out the code, here is the complete html code:

```
<html>
<body>
<form action="javascript:calc()">
Input: <input type="text" id="input"/><br />
Percent: <input type="text" id="percent" value="3"/>%<br />
Output: <input type="text" id="output"/><br />
<input type="submit" />
</form>
</body>
<script>
function calc() {
  var i = document.getElementById("input").value;
  var p = document.getElementById("percent").value;
  var o = (i/100) * p;
  document.getElementById("output").value = o;
}
</script>
</html>
```


----------

