Potencias en JavaScript

#1 (**permalink**) 02/09/2010, 17:59

Parecerá una duda un poco tonta ¿pero por qué si pongo "document.write(2^2)" me sale "0" y no "4"?

Sin embargo con "document.write(Math.pow(2,2))" si obtengo el resultado correcto.

¿Se podría crear alguna función para que cada vez que salga "x^y" se convierta automáticamente en "Math.pow(x,y)"?

Saludos.

maycolalvarez · #2 (**permalink**) 02/09/2010, 18:08

en js ^ corresponde a XOR

zerokilled · #3 (**permalink**) 02/09/2010, 18:12

el operador de potencias no existe en javascript. como comenta maycol, en javascript el operador ^ es el operador bitwise XOR. como ya sabras, en javascript para calcular potencias se usa el metodo pow del objeto Math.

#4 (**permalink**) 02/09/2010, 18:37

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<?xml version="1.1" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp">
<head>
<title>Calculadora</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
body {
  margin:0px;
  text-align:center;
}
 
#title {
  font-family:arial,sans-serif;
  font-size:13px;
  color:#cccccc;
}
 
#text {
  background-color:#cccccc;
  font-family:arial,sans-serif;
  font-size:30px;
  width:90%;
  height:40px;
}
 
#border1 {
  background-color:#EEEEEE;
  border-color: #aaaaaa;
  border-width: 5px;
  border-style: solid;
  width:370px;
  height:370px;
}
 
#border2 {
  background-color:#333333;
  border-color: #aaaaaa;
  border-width: 3px;
  border-style: solid;
  width:100%;
  height:100%;
}
 
.space {
  margin:10px;
}
 
.buttom {
  border:1px dotted;
  background-color:#6d6d6d;
  font-family:arial,sans-serif;
  font-size:25px;
  color:#ffffff;
  width:85px;
  height:40px;
}
 
.equal {
  border:1px dotted;
  background-color:#3d67a7;
  font-family:arial,sans-serif;
  font-size:25px;
  color:#cccccc;
  width:174px;
  height:40px;
}
 
.clean {
  border:1px dotted;
  background-color:#bd1d46;
  font-family:arial,sans-serif;
  font-size:25px;
  color:#cccccc;
  width:85px;
  height:40px;
}
 
.numbers {
  border:1px dotted;
  background-color:#3da03f;
  font-family:arial,sans-serif;
  font-size:25px;
  color:#cccccc;
  width:85px;
  height:40px;
}
 
.functions {
  border:1px dotted;
  background-color:#404040;
  font-family:arial,sans-serif;
  font-size:25px;
  color:#cccccc;
  width:85px;
  height:40px;
}
</style>
<script type="text/javascript">
function addChar(input, character)
{
    if(input.value == null || input.value == "0")
        input.value = character
    else
        input.value += character
}
 
function deleteChar(input)
{
    input.value = input.value.substring(0, input.value.length - 1)
}
 
function changeSign(input)
{
    if(input.value.substring(0, 1) == "-")
  input.value = input.value.substring(1, input.value.length)
    else
  input.value = "-" + input.value
}
 
function compute(form) 
{
  form.display.value = eval(form.display.value)
}
 
function square(form) 
{
  form.display.value = eval(form.display.value) * eval(form.display.value)
}
 
function checkNum(str) 
{
  for (var i = 0; i < str.length; i++) {
    var ch = str.substring(i, i+1)
    if (ch < "0" || ch > "9") {
      if (ch != "/" && ch != "*" && ch != "^" && ch != "+" && ch != "-" && ch != "."
        && ch != "(" && ch!= ")") {
        alert("\u00A1Error!")
        return false
      }
    }
  }
  return true
}
</script>
</head>
<body>
<div>
<form action="">
<table id="border1">
<tr>
<td colspan="4">
 
<table id="border2">
<tr>
<td><p class="space"></p><input name="display" id="text" value="0" /><p class="space" ></p></td>
</tr>
</table>
 
</td>
</tr>
 
<tr>
<td>
<input type="button" value="7" class="buttom"
  onclick="addChar(this.form.display, '7')" />
</td>
<td>
<input type="button" value="8" class="buttom"
  onclick="addChar(this.form.display, '8')" />
</td>
<td>
<input type="button" value="9" class="buttom"
  onclick="addChar(this.form.display, '9')" />
</td>
<td>
<input type="button" value="/" class="functions"
  onclick="addChar(this.form.display, '/')" />
</td>
</tr>
 
<tr>
<td>
<input type="button" value="4" class="buttom"
  onclick="addChar(this.form.display, '4')" />
</td>
<td>
<input type="button" value="5" class="buttom"
  onclick="addChar(this.form.display, '5')" />
</td>
<td>
<input type="button" value="6" class="buttom"
  onclick="addChar(this.form.display, '6')" />
</td>
<td>
<input type="button" value="*" class="functions"
  onclick="addChar(this.form.display, '*')" />
</td>
</tr>
 
<tr>
<td>
<input type="button" value="1" class="buttom"
  onclick="addChar(this.form.display, '1')" />
</td>
<td>
<input type="button" value="2" class="buttom"
  onclick="addChar(this.form.display, '2')" />
</td>
<td>
<input type="button" value="3" class="buttom"
  onclick="addChar(this.form.display, '3')" />
</td>
<td>
<input type="button" value="-"  class="functions"
  onclick="addChar(this.form.display, '-')" />
</td>
</tr>
 
<tr>
<td>
<input type="button" value="0" class="buttom"
  onclick="addChar(this.form.display, '0')" /> 
</td>
<td>
<input type="button" value="." class="buttom"
  onclick="addChar(this.form.display, '.')" /> 
</td>
<td>
<input type="button" value="+/-" class="functions"
  onclick="changeSign(this.form.display)" />
</td>
<td>
<input type="button" value="+" class="functions"
  onclick="addChar(this.form.display, '+')" />
</td>
</tr>
 
<tr>
<td>
<input type="button" value="(" class="functions"
  onclick="addChar(this.form.display, '(')" /> 
</td>
<td>
<input type="button" value=")" class="functions"
  onclick="addChar(this.form.display, ')')" /> 
</td>
<td>
<input type="button" value="^" class="functions"
  onclick="addChar(this.form.display, '^')" />
</td>
<td>
<input type="button" value="«" class="clean"
  onclick="deleteChar(this.form.display)" />
</td>
</tr>
 
<tr>
<td colspan="2">
<input type="button" value="=" name="enter" class="equal"
  onclick="if (checkNum(this.form.display.value))
  { compute(this.form) }" />
</td>
<td>
<select id="other" class="numbers" onchange="addChar(this.form.display,this.value);document.getElementById('other').options.selectedIndex = 0;">
<option value="0">More</option>
<option value="1.618033988749894">ϕ</option>
<option value="2.718281828459045">e</option>
<option value="3.141592653589793">π</option>
</select>
</td>
<td colspan="1">
<input type="button" value="C" class="clean"
  onclick="this.form.display.value = 0 " />
</td>
</tr>
</table>
</form>
</div>
</body>
</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 originalfunction square(form) 
{
  form.display.value = Math.pow(eval(form.display.value), prompt('Exponent:', '1'))
}

Y cambiando esto otro:

Código HTML:

Ver original<td>
<input type="button" value="^" class="functions"
  onclick="square(this.form)" />
</td>
<td>

Saludos y gracias.