HTML and Javascript for percentage calculator

B

beastboy

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

Amithansda

Journeyman
Let say,
1.your input box is like this
Code: 
<input type="text" id="inputBox"/>
2.Your output box is like this
Code: 
<input type="text" id="outputBox"/>
3.Your Button is like this
Code: 
<input type="button" id="ButtonPerc" onclick="calcPerc()"/>

then the function calcPerc() should be like this
Code: 
function calcPerc() {
    var input = document.getElementById("inputBox").value;
    document.getElementById("outputBox").value = (input / 100) * 3;
    }
 
lywyre

lywyre

Cyborg Agent
That should do.
If you still have trouble figuring out the code, here is the complete html code:
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>
 
You must log in or register to reply here.
Top Bottom