Tema: Potencias en JavaScript
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 02/09/2010, 18:37
zant95
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Potencias en JavaScript
Ok, muchas gracias. Es que estoy haciendo una calculadora con HTML, CSS y Javascript y me gustaría poner un botón para potencias.

Si alguien sabe como hacerlo se lo agradecería.

Aquí dejo el código:

Código HTML: 
Ver original
  1. <?xml version="1.1" encoding="utf-8" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp">
  4. <head>
  5. <title>Calculadora</title>
  6. <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
  7. <style type="text/css">
  8. body {
  9.   margin:0px;
  10.   text-align:center;
  11. }
  12.  
  13. #title {
  14.   font-family:arial,sans-serif;
  15.   font-size:13px;
  16.   color:#cccccc;
  17. }
  18.  
  19. #text {
  20.   background-color:#cccccc;
  21.   font-family:arial,sans-serif;
  22.   font-size:30px;
  23.   width:90%;
  24.   height:40px;
  25. }
  26.  
  27. #border1 {
  28.   background-color:#EEEEEE;
  29.   border-color: #aaaaaa;
  30.   border-width: 5px;
  31.   border-style: solid;
  32.   width:370px;
  33.   height:370px;
  34. }
  35.  
  36. #border2 {
  37.   background-color:#333333;
  38.   border-color: #aaaaaa;
  39.   border-width: 3px;
  40.   border-style: solid;
  41.   width:100%;
  42.   height:100%;
  43. }
  44.  
  45. .space {
  46.   margin:10px;
  47. }
  48.  
  49. .buttom {
  50.   border:1px dotted;
  51.   background-color:#6d6d6d;
  52.   font-family:arial,sans-serif;
  53.   font-size:25px;
  54.   color:#ffffff;
  55.   width:85px;
  56.   height:40px;
  57. }
  58.  
  59. .equal {
  60.   border:1px dotted;
  61.   background-color:#3d67a7;
  62.   font-family:arial,sans-serif;
  63.   font-size:25px;
  64.   color:#cccccc;
  65.   width:174px;
  66.   height:40px;
  67. }
  68.  
  69. .clean {
  70.   border:1px dotted;
  71.   background-color:#bd1d46;
  72.   font-family:arial,sans-serif;
  73.   font-size:25px;
  74.   color:#cccccc;
  75.   width:85px;
  76.   height:40px;
  77. }
  78.  
  79. .numbers {
  80.   border:1px dotted;
  81.   background-color:#3da03f;
  82.   font-family:arial,sans-serif;
  83.   font-size:25px;
  84.   color:#cccccc;
  85.   width:85px;
  86.   height:40px;
  87. }
  88.  
  89. .functions {
  90.   border:1px dotted;
  91.   background-color:#404040;
  92.   font-family:arial,sans-serif;
  93.   font-size:25px;
  94.   color:#cccccc;
  95.   width:85px;
  96.   height:40px;
  97. }
  98. </style>
  99. <script type="text/javascript">
  100. function addChar(input, character)
  101. {
  102.     if(input.value == null || input.value == "0")
  103.         input.value = character
  104.     else
  105.         input.value += character
  106. }
  107.  
  108. function deleteChar(input)
  109. {
  110.     input.value = input.value.substring(0, input.value.length - 1)
  111. }
  112.  
  113. function changeSign(input)
  114. {
  115.     if(input.value.substring(0, 1) == "-")
  116.   input.value = input.value.substring(1, input.value.length)
  117.     else
  118.   input.value = "-" + input.value
  119. }
  120.  
  121. function compute(form) 
  122. {
  123.   form.display.value = eval(form.display.value)
  124. }
  125.  
  126. function square(form) 
  127. {
  128.   form.display.value = eval(form.display.value) * eval(form.display.value)
  129. }
  130.  
  131. function checkNum(str) 
  132. {
  133.   for (var i = 0; i < str.length; i++) {
  134.     var ch = str.substring(i, i+1)
  135.     if (ch < "0" || ch > "9") {
  136.       if (ch != "/" && ch != "*" && ch != "^" && ch != "+" && ch != "-" && ch != "."
  137.         && ch != "(" && ch!= ")") {
  138.         alert("\u00A1Error!")
  139.         return false
  140.       }
  141.     }
  142.   }
  143.   return true
  144. }
  145. </script>
  146. </head>
  147. <body>
  148. <div>
  149. <form action="">
  150. <table id="border1">
  151. <tr>
  152. <td colspan="4">
  153.  
  154. <table id="border2">
  155. <tr>
  156. <td><p class="space"></p><input name="display" id="text" value="0" /><p class="space" ></p></td>
  157. </tr>
  158. </table>
  159.  
  160. </td>
  161. </tr>
  162.  
  163. <tr>
  164. <td>
  165. <input type="button" value="7" class="buttom"
  166.   onclick="addChar(this.form.display, '7')" />
  167. </td>
  168. <td>
  169. <input type="button" value="8" class="buttom"
  170.   onclick="addChar(this.form.display, '8')" />
  171. </td>
  172. <td>
  173. <input type="button" value="9" class="buttom"
  174.   onclick="addChar(this.form.display, '9')" />
  175. </td>
  176. <td>
  177. <input type="button" value="/" class="functions"
  178.   onclick="addChar(this.form.display, '/')" />
  179. </td>
  180. </tr>
  181.  
  182. <tr>
  183. <td>
  184. <input type="button" value="4" class="buttom"
  185.   onclick="addChar(this.form.display, '4')" />
  186. </td>
  187. <td>
  188. <input type="button" value="5" class="buttom"
  189.   onclick="addChar(this.form.display, '5')" />
  190. </td>
  191. <td>
  192. <input type="button" value="6" class="buttom"
  193.   onclick="addChar(this.form.display, '6')" />
  194. </td>
  195. <td>
  196. <input type="button" value="*" class="functions"
  197.   onclick="addChar(this.form.display, '*')" />
  198. </td>
  199. </tr>
  200.  
  201. <tr>
  202. <td>
  203. <input type="button" value="1" class="buttom"
  204.   onclick="addChar(this.form.display, '1')" />
  205. </td>
  206. <td>
  207. <input type="button" value="2" class="buttom"
  208.   onclick="addChar(this.form.display, '2')" />
  209. </td>
  210. <td>
  211. <input type="button" value="3" class="buttom"
  212.   onclick="addChar(this.form.display, '3')" />
  213. </td>
  214. <td>
  215. <input type="button" value="-"  class="functions"
  216.   onclick="addChar(this.form.display, '-')" />
  217. </td>
  218. </tr>
  219.  
  220. <tr>
  221. <td>
  222. <input type="button" value="0" class="buttom"
  223.   onclick="addChar(this.form.display, '0')" /> 
  224. </td>
  225. <td>
  226. <input type="button" value="." class="buttom"
  227.   onclick="addChar(this.form.display, '.')" /> 
  228. </td>
  229. <td>
  230. <input type="button" value="+/-" class="functions"
  231.   onclick="changeSign(this.form.display)" />
  232. </td>
  233. <td>
  234. <input type="button" value="+" class="functions"
  235.   onclick="addChar(this.form.display, '+')" />
  236. </td>
  237. </tr>
  238.  
  239. <tr>
  240. <td>
  241. <input type="button" value="(" class="functions"
  242.   onclick="addChar(this.form.display, '(')" /> 
  243. </td>
  244. <td>
  245. <input type="button" value=")" class="functions"
  246.   onclick="addChar(this.form.display, ')')" /> 
  247. </td>
  248. <td>
  249. <input type="button" value="^" class="functions"
  250.   onclick="addChar(this.form.display, '^')" />
  251. </td>
  252. <td>
  253. <input type="button" value="«" class="clean"
  254.   onclick="deleteChar(this.form.display)" />
  255. </td>
  256. </tr>
  257.  
  258. <tr>
  259. <td colspan="2">
  260. <input type="button" value="=" name="enter" class="equal"
  261.   onclick="if (checkNum(this.form.display.value))
  262.   { compute(this.form) }" />
  263. </td>
  264. <td>
  265. <select id="other" class="numbers" onchange="addChar(this.form.display,this.value);document.getElementById('other').options.selectedIndex = 0;">
  266. <option value="0">More</option>
  267. <option value="1.618033988749894">ϕ</option>
  268. <option value="2.718281828459045">e</option>
  269. <option value="3.141592653589793">π</option>
  270. </select>
  271. </td>
  272. <td colspan="1">
  273. <input type="button" value="C" class="clean"
  274.   onclick="this.form.display.value = 0 " />
  275. </td>
  276. </tr>
  277. </table>
  278. </form>
  279. </div>
  280. </body>
  281. </html>

Que se debería ver más o menos así (desde Google Chrome):



Saludos.

EDITO:

Ya lo he solucionado actualizando esta función:

Código Javascript: 
Ver original
  1. function square(form) 
  2. {
  3.   form.display.value = Math.pow(eval(form.display.value), prompt('Exponent:', '1'))
  4. }

Y cambiando esto otro:

Código HTML: 
Ver original
  1. <td>
  2. <input type="button" value="^" class="functions"
  3.   onclick="square(this.form)" />
  4. </td>
  5. <td>

Saludos y gracias.
Última edición por zant95; 02/09/2010 a las 21:00