...

View Full Version : onClick help



tinghank12
05-01-2008, 02:09 AM
I just found a free "javascript" calculator on the internet, and am trying to modify it to act like a keyboard, when you press a button, it shows up in the text box.

Here is my code so far, it doesn't work, and I don't know what to do because i'm not experience with these issues.



<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<input type="text" name="input" size="50" />
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="a" VALUE=" a " OnClick="Input.value += 'a'">
<INPUT TYPE="button" NAME="b" VALUE=" b " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="c" VALUE=" c " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="d" VALUE=" d " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="e" VALUE=" e " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="f" VALUE=" f " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="g" VALUE=" g " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="h" VALUE=" h " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="i" VALUE=" i " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="j" VALUE=" j " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="k" VALUE=" k " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="l" VALUE=" l " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="m" VALUE=" m " OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="n" VALUE=" n " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="o" VALUE=" o " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="p" VALUE=" p " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

Philip M
05-01-2008, 12:14 PM
Try this - a much better calculator!


<HTML>
<HEAD>

<style type="text/css">
INPUT.disp { background: #DDDDDD; color: #000000; font-weight: bold }
INPUT.btswhite { color: #DC143C; font-weight: bold }
INPUT.btsred { color: #DC143C; font-weight: bold }
INPUT.btsblue { color: #0000FF; font-weight: bold }
</style>

<script type = "text/javascript">

function DOit() {
var userinput = document.calc.input.value;
document.calc.input.value = eval(userinput);
}
function plus() {
document.calc.input.value += '+';
}
function minus() {
document.calc.input.value += '-';
}
function mult() {
document.calc.input.value += '*';
}
function div() {
document.calc.input.value += '/';
}
function decimal() {
document.calc.input.value += '.';
}
function openp() {
document.calc.input.value += '(';
}
function closep() {
document.calc.input.value += ')';
}
function num(x) {
document.calc.input.value += x;
}
function recip() {
document.calc.input.value = 1/(document.calc.input.value);
}
function square() {
document.calc.input.value = (document.calc.input.value)*(document.calc.input.value);
}
function cube() {
document.calc.input.value = (document.calc.input.value)*(document.calc.input.value)*(document.calc.input.value);
}
function pi() {
document.calc.input.value += Math.PI;
}
function plus_or_minus() {
document.calc.input.value *= -1;
}
function percent() {
document.calc.input.value *= .01;
}
function sqrt() {
document.calc.input.value = Math.sqrt(document.calc.input.value);
}
function power() {
var np = prompt("What power do you want? Must be a number!","")
document.calc.input.value = Math.pow(document.calc.input.value, np);
}
function cos() {
document.calc.input.value = Math.cos(document.calc.input.value);
}
function sin() {
document.calc.input.value = Math.sin(document.calc.input.value);
}
function tan() {
document.calc.input.value = Math.tan(document.calc.input.value);
}
function Round() {
document.calc.input.value = parseInt(document.calc.input.value);
}

</script>

</HEAD>

<BODY>

<FORM NAME="calc">

<p align="center"><center>

<TABLE>
<BR><TABLE WIDTH="55" HEIGHT="65" CELLSPACING="2" CELLPADDING="5" BORDER="2" BORDERCOLOR="#000000">
<tr>
<td><INPUT TYPE="text" NAME="input" SIZE="20" MAXLENGTH="30" class="disp">
<td><INPUT TYPE="button" VALUE=" ^ " onClick="power()" class="btswhite">
<td><INPUT TYPE="button" VALUE=" C " onClick="document.calc.input.value = ''; " class="btswhite">
<td><INPUT TYPE="button" VALUE="Cos" onClick="cos()" class="btsred">
</tr>
<tr>
<td><INPUT TYPE="button" Value=" 1 " class="btsblue" onClick="num(1)">
<INPUT TYPE="button" VALUE=" 2 " class="btsblue" onClick="num(2)">
<INPUT TYPE="button" VALUE=" 3 " class="btsblue" onClick="num(3)">
<INPUT TYPE="button" VALUE=" ( " class="btswhite" onClick="openp()">
<td><INPUT TYPE="button" VALUE=" + " onClick="plus()" class="btswhite">
<td><INPUT TYPE="button" VALUE="Sqrt" onClick="sqrt()" class="btsred">
<td><INPUT TYPE="button" VALUE="Sin " onClick="sin()" class="btsred">
</tr>
<tr>
<td><INPUT TYPE="button" Value=" 4 " class="btsblue" onClick="num(4)">
<INPUT TYPE="button" Value=" 5 " class="btsblue" onClick="num(5)">
<INPUT TYPE="button" Value=" 6 " class="btsblue" onClick="num(6)">
<INPUT TYPE="button" NAME="closeprth" Value=" ) " class="btswhite" onClick="closep()">
<td><INPUT TYPE="button" VALUE=" - " onClick="minus()" class="btswhite">
<td><INPUT TYPE="button" Value=" 1/x " class="btsred" onClick="recip()">
<td><INPUT TYPE="button" VALUE="Tan" onClick="tan()" class="btsred">
</tr>
<tr>
<td><INPUT TYPE="button" Value=" 7 " class="btsblue" onClick="num(7)">
<INPUT TYPE="button" Value=" 8 " class="btsblue" onClick="num(8)">
<INPUT TYPE="button" Value=" 9 " class="btsblue" onClick="num(9)">
<INPUT TYPE="button" VALUE=" % " onClick="percent()" class="btswhite">
<td><INPUT TYPE="button" VALUE=" * " onClick="mult()" class="btswhite">
<td><button style="background: #BBBBBB; color: #DC143C; font-weight: bold" onClick="square()">&nbspx<sup>2</sup>&nbsp&nbsp </button>
<td><INPUT TYPE="button" VALUE="Rnd" onClick="Round()" class="btsred">
</tr>
<tr>
<td><INPUT TYPE="button" Value=" 0 " class="btsblue" onClick="num(0)">
<INPUT TYPE="button" Value=" . " class="btsblue" onClick="decimal()">
<INPUT TYPE="button" VALUE=" +/- " onClick="plus_or_minus()" class="btsblue">
<INPUT TYPE="button" Value=" Pi " class="btsred" onClick="pi()">
<td><INPUT TYPE="button" VALUE=" / " onClick="div()" class="btswhite">
<td><button style="background: #BBBBBB; color: #DC143C; font-weight: bold" onClick="cube()">&nbspx<sup>3</sup>&nbsp&nbsp</button>
<td><INPUT TYPE="button" VALUE=" = " onClick="DOit()" class="btsred">
</tr>

</TABLE>

</FORM>


</BODY>
</HTML>

JoWiGo
05-01-2008, 04:53 PM
Philip, I think that they do not actually want a calculator but do want a keyboard like program.

tinghank12, the onClick part of each line is called whenever someone clicks on the button. The line OnCLick="Calc.Input.value += '2'" simply means that when someone clicks the button, the Calc.input.value+='2' line is executed.

That line is attempting to add (the += part) 2 (the '2' part) to another part of the form (the Calc.input.value part). If you look further up the code you will see an input box (like googles search box, a text input slot) that is called 'input' (<input type="text" name="input" size="50" />). If you want to instead add leters instead of numbers, simply change the '2' part above to 'b' or something along those lines, and copy and paste the rest.

tinghank12
05-01-2008, 11:36 PM
I already tried that for the 'a' letter, but it didn't work.

tinghank12
05-02-2008, 10:01 PM
Any help please?

tinghank12
05-03-2008, 04:11 PM
Nobody knows how to do this?

Philip M
05-03-2008, 05:26 PM
Is this what you want?


<form name = "calc">

<input type ="button" name ="a" value=" a " onClick = "document.calc.input.value = document.calc.input.value + 'a' ">
<input type ="button" name ="b" value=" b " onClick = "document.calc.input.value = document.calc.input.value + 'b' ">
<input type ="button" name ="c" value=" c " onClick = "document.calc.input.value = document.calc.input.value + 'c' ">
<br><br>

<input type = "text" name="input" size="50" />

</form>

Always a bad idea to assign the name "input" to an input tag or a "button" to a button. Just leads to confusion. Suggest you rename your "input" textbox to "letters" or something.

tinghank12
05-03-2008, 11:32 PM
Wow thats exactly what I was looking for. how do you have a value that deletes on letter when clicked, and how do you make a space button?

Philip M
05-04-2008, 07:28 AM
Wow thats exactly what I was looking for. how do you have a value that deletes on letter when clicked, and how do you make a space button?




<form name = "calc">

<input type ="button" name ="a" value=" a " onClick = "document.calc.input.value = document.calc.input.value + 'a' ">
<input type ="button" name ="b" value=" b " onClick = "document.calc.input.value = document.calc.input.value + 'b' ">
<input type ="button" name ="c" value=" c " onClick = "document.calc.input.value = document.calc.input.value + 'c' ">
<input type ="button" name ="space" value=" Space " onClick = "document.calc.input.value = document.calc.input.value + ' ' ">
<input type ="button" name ="cancel" value=" Delete last letter " onClick = "document.calc.input.value = document.calc.input.value.substring(0,document.calc.input.value.length-1)">

<br><br>

<input type = "text" name="input" size="50" />

</form>

"Come and catch up with your camp friends and introduce new families to the wonders of a Miniwanca summer"
American Youth Foundation, Cleveland area Miniwanca party.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum