Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: onClick help

  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onClick help

    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.

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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Try this - a much better calculator!
    Code:
    <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>

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    114
    Thanks
    4
    Thanked 3 Times in 3 Posts
    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.

  • #4
    New Coder
    Join Date
    Apr 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I already tried that for the 'a' letter, but it didn't work.

  • #5
    New Coder
    Join Date
    Apr 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any help please?

  • #6
    New Coder
    Join Date
    Apr 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nobody knows how to do this?

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Is this what you want?

    Code:
    <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.
    Last edited by Philip M; 05-03-2008 at 05:30 PM.

  • #8
    New Coder
    Join Date
    Apr 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Quote Originally Posted by tinghank12 View Post
    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?
    Code:
    <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.
    Last edited by Philip M; 05-04-2008 at 07:41 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •