HTML and Javascript for percentage calculator


Broken In
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
//or visit mt web site at
//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

<FORM name=form1>
<TABLE cellSpacing=1 cellPadding=1 border=1>
<TD align=middle colSpan=3><B><FONT size=4>Percentage Calculator</FONT></B>
<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>
<TD><INPUT size=5 name=c>*is what percent of <INPUT size=5
<TD>Answer: <INPUT size=5 name=total2>*%</TD>
<TD><INPUT onclick=perc2() type=button value=Calculate></TD>
<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


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

// End -->
<form name="form1">
<table border=1 cellpadding=4 cellspacing=1>

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

<td align=center><input type="button" value="Calculate"

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




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;


Cyborg Agent
That should do.
If you still have trouble figuring out the code, here is the complete html code:
<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" />
function calc() {
  var i = document.getElementById("input").value;
  var p = document.getElementById("percent").value;
  var o = (i/100) * p;
  document.getElementById("output").value = o;
Top Bottom