Desarrollo y diseño

Calculadora Javascript

KiIIer
KiIIer #1 Nov '08

Buenas, tengo una duda con un trabajo que me han mandado y bueno consiste en crear una calculadora con javascript, lo que tengo hecho son los valores, os pego lo que tengo hecho:

<html>
<head>

<script language="javascript">

function uno (){

document.led.texto.value= document.led.texto.value+1;
}
function dos (){
document.led.texto.value= document.led.texto.value+2;
}
function tres (){
document.led.texto.value= document.led.texto.value+3;
}
function cuatro (){
document.led.texto.value= document.led.texto.value+4;
}
function cinco (){
document.led.texto.value= document.led.texto.value+5;
}
function seis (){
document.led.texto.value= document.led.texto.value+6;
}
function siete (){
document.led.texto.value= document.led.texto.value+7;
} function ocho (){
document.led.texto.value= document.led.texto.value+8;
}
function nueve (){
document.led.texto.value= document.led.texto.value+9;
}
function cero (){
document.led.texto.value= document.led.texto.value+0;

}
function borrar()
{
document.led.texto.value="";
}
function sumar()
¿ ?

</script>
</head>
<body>

<p><form name="led" id="led" method="post" action="">
<input name="texto" type="text" id="text"></p>
<input type="button" name="n1" onclick="uno();" value="1">
<input type="button" name="n2" onclick="dos();" value="2">
<input type="button" name="n3" onclick="tres();" value="3">
<input type="button" name="C" onclick="borrar();" value="C"></p>
<p><input type="button" name="n4" onclick="cuatro();" value="4">
<input type="button" name="n5" onclick="cinco();" value="5">
<input type="button" name="n6" onclick="seis();" value="6">
<input type="button" name=">" onclick="slice();" value=">"></p>
<p><input type="button" name="n7" onclick="siete();" value="7">
<input type="button" name="n8" onclick="ocho();" value="8">
<input type="button" name="n9" onclick="nueve();" value="9">
<input type="button" name="n0" onclick="cero();" value="0"></p>
<p><input type="button" name="+" onclick="sumar();" value="+">
<input type="button" name="-" onclick="resta();" value="-">
<input type="button" name="" onclick="multiplicacion();" value="">
<input type="button" name="/" onclick="dividision();" value="/"></p>
<input type="button" name="=" onclick="resultado;" value=" = ">
</form>
</body>
</html>

.............................

Como veis para cada valor he asignado una función pero para sumar,restar,multiplicar y dividir nose que poner, el objetivo de este trabajo es que cuando por ejemplo pongo un valor 1 (en el led aparece el numero 1) y cuando le de al operador que quiera (+) por ejemplo, lo que hay en el led se borra y despues meto el segundo valor 2 (en el led aparece el numero 2) me sume y el resultado me lo de apretando el valor (=), pues eso lo que no se es lo ultimo que he indicado, no puedo usar This ni nada que no haya dado en clase, unicamente podria usar switch, case, break, default y nose si me dejare algo mas. Ya se que es muy específico lo que pido, pero bueno a ver si alguien que pilote esto me ayuda.
Thx de antemano.

cabron
cabron #2 Nov '08 Judas

Supongo que estás empezando y no sabes como va bien, pero lo que has hecho es una burrada como una casa.

En lugar de hacer 10 funciones tendrías que haber hecho una a la que le pases un parámetro, y que la función use el valor de ese parámetro.

KiIIer
KiIIer #3 Nov '08

Eso si me lo menciona en el ejercicio, que en vez de poner una funcion por boton podia hacer una funcion para cada grupo de botones, poniendo un parametro, pero ¿como seria para sumar y eso?

JuAn4k4
JuAn4k4 #4 Nov '08

No se nada de js, pero yo diria que algo asi:

<input type="button" name="n1" onclick="valor("1");" value="1">

function valor(String a){
document.led.texto.value= document.led.texto.value+a;
}

Se nota que no tengo ni idea de js !

Crawler
Crawler #5 Nov '08

pues mira, yo tampoco controlo mucho de programar, pero asi aprendo, como mínimo pseudocódigo:

Para los botones de 0 a 9, como ya han comentado: valor(x) y actualizas el texto de la calculadora
(document.led.texto creo que era).

Para los botones de función (sumar por ejemplo):

  1. guardas lo que tienes en la pantalla de la calculadora en una var (cifra1), y añades el símbolo en la caja de texto (o la borras, o o que te apetezca hacer con ella).
    2 Guardas la función que han clickado en otra variable (funcion = suma)

Para el boton "=":
1 Cojes var1, le aplicas la var "funcion" y lo que tengas en pantalla nuevamente. "var1" "funcion" "var2"
2 Muestras en pantalla.

Funcionamiento:

Pulso 1: se actualiza la pantalla: 1
Pulso 6: se actualiza la pantalla: 16
Pulso sumar: var1 = 16, var funcion="sumar". Opción más fácil: borro pantalla.
Pulso 9: se actualiza la pantalla: 9
Pulso =: var1 funcion var2

Complicaciones:
hay que hacer un switch (o algún procedimiento mejor) que diga (si "funcion" = sumar, 16 + 9)
Si no borras la pantalla al apretar la tecla de función, al pulsar "=" no coges el valor de lo que tengas en pantalla, si no el numero a partir del símbolo.

Idea rápida:
Si tengo en pantalla: 16+9, puedo coger ese string, dividirlo por el símbolo "16", "+","9", y según el símbolo hacer la función correspondiente.

No se, me aburro, y se me ocurren varias maneras pero ninguna me termina de convencer :P

JuAn4k4
JuAn4k4 #6 Nov '08

Y luego le das al - y al 3 y peta.

var1 = 0.

el valor que pulse, lo vas acumulando en var2.

var2= 0 inicialmente, y por cada numero que pulse haces:

var2 = var2*10 + numeroPulsado

cuando pulse una funcion ( +,-,*,/ )

realizas esa funcion con var1 y var2 y guardas el resultado en var1, y a var2 le pones el valor 0.

Eso seria lo que haria yo para una sencilla, al menos tendrias una que hiciera algo.

Crawler
Crawler #7 Nov '08

Y luego le das al - y al 3 y peta.
Pues si, tienes toda la razón xDD

/me suspendido :'(

KiIIer
KiIIer #8 Nov '08

Bueno, ya he conseguido que haga todo tipo de calculos, pero aun me falta definir el maxlength de manera que si el resultado los digitos que me dan son mayores que 8 me muestre el resultado con todos los digitos que seria o unos 12 en total por ejemplo, si alguien sabe como podría ser que lo ponga pls.

Asi queda la calculadora hasta ahora:

<html>
<head>
<script language="javascript">

var digitouno
var operador
var digitodos

function uno(){

document.form.led.value = document.form.led.value+1;
}
function dos(){
document.form.led.value= document.form.led.value+2;
}
function tres(){
document.form.led.value= document.form.led.value+3;
}
function cuatro(){
document.form.led.value= documennt.form.led.value+4;
}
function cinco(){
document.form.led.value= document.form.led.value+5;
}
function seis(){
document.form.led.value= document.form.led.value+6;
}
function siete(){
document.form.led.value= document.form.led.value+7;
}
function ocho(){
document.form.led.value= document.form.led.value+8;
}
function nueve(){
document.form.led.value= document.form.led.value+9;
}
function cero(){
document.form.led.value= document.form.led.value+0;
}
function borrar() {
document.form.led.value="";
}
function borrardig(){
document.form.led.value=document.form.led.value. slice(0,-1);
}
function sumar() {
digitouno=document.form.led.value;
operador="+";
document.form.led.value="";
}
function restar(){
digitouno=document.form.led.value;
operador="-";
document.form.led.value=""
}
function multiplicar(){
digitouno=document.form.led.value;
operador="*";
document.form.led.value="";
}
function dividir(){
digitouno=document.form.led.value;
operador="/";
document.form.led.value="";
}
function resultado(){
digitodos=document.form.led.value;
document.form.led.value = eval(digitouno + operador + digitodos);
}

</script>
</head>
<body>

<p><form name="form" method="post" action="">
<input name="led" type="text" maxlength="8"></p>


<input type="button" name="nuno" onclick="uno();" value="1">
<input type="button" name="ndos" onclick="dos();" value="2">
<input type="button" name="ntres" onclick="tres();" value="3">
<input type="button" name="C" onclick="borrar();" value="C"></p>


<p><input type="button" name="ncuatro" onclick="cuatro();" value="4">
<input type="button" name="ncinco" onclick="cinco();" value="5">
<input type="button" name="nseis" onclick="seis();" value="6">
<input type="button" name="slice" onclick="borrardig();" value="<"></p>


<p><input type="button" name="nsiete" onclick="siete();" value="7">
<input type="button" name="nocho" onclick="ocho();" value="8">
<input type="button" name="nnuevo" onclick="nueve();" value="9">
<input type="button" name="ncero" onclick="cero();" value="0"></p>


<p><input type="button" name="+" onclick="sumar();" value="+">
<input type="button" name="-" onclick="restar();" value="-">
<input type="button" name="" onclick="multiplicar();" value="">
<input type="button" name="/" onclick="divididir();" value="/"></p>

<input type="button" name="igual" onclick="resultado();" value=" = ">
</form>
</body>
</html>

JuAn4k4
JuAn4k4 #9 Nov '08

Has probado tu a darle al - y luego al 3 y luego a resultado ? Deberia darte -3.

Despues, porque no pruebas a leer el tema que has abierto ?

Aviso , se 0 de esto eh pero vamos, teniendo una funcion eval que al parecer hace maravillas, dios mio....

<html>
<head>
<script language="javascript">

var operacion
var oldAns

function asignarOperador(valor){
operacion = operacion + valor;
document.form.led.value= operacion;
}

funciont Operador(valor){
/* Si nos pulsa un operador despues de una operacion, lo operamos con el ultimo resultado */
if ( operacion == "") { operacion = oldAns + valor; }
else { operacion = operacion + valor; }
document.form.led.value= operacion;
}

function borrar() {
document.form.led.value="";
}
function borrardig(){
document.form.led.value=document.form.led.value. slice(0,-1);
}

function resultado(){
oldAns = eval(operacion)
document.form.led.value = oldAns;
operacion = "";
}

</script>
</head>
<body>

<p><form name="form" method="post" action="">
<input name="led" type="text" maxlength="8"></p>

<input type="button" name="nuno" onclick="asignarOperador("1");" value="1">
<input type="button" name="ndos" onclick="asignarOperador("2");" value="2">
<input type="button" name="ntres" onclick="asignarOperador("3");" value="3">
<input type="button" name="C" onclick="borrar();" value="C"></p>

<p><input type="button" name="ncuatro" onclick="asignarOperador("4");" value="4">
<input type="button" name="ncinco" onclick="asignarOperador("5");" value="5">
<input type="button" name="nseis" onclick="asignarOperador("6");" value="6">
<input type="button" name="slice" onclick="borrardig();" value="<"></p>

<p><input type="button" name="nsiete" onclick="asignarOperador("7");" value="7">
<input type="button" name="nocho" onclick="asignarOperador("8");" value="8">
<input type="button" name="nnuevo" onclick="asignarOperador("9");" value="9">
<input type="button" name="ncero" onclick="asignarOperador("0");" value="0"></p>

<p><input type="button" name="+" onclick="Operador("+");" value="+">
<input type="button" name="-" onclick="Operador("-");" value="-">
<input type="button" name="" onclick="Operador("");" value="*">
<input type="button" name="/" onclick="Operador("/");" value="/"></p>

<input type="button" name="igual" onclick="resultado();" value=" = ">
</form>
</body>
</html>

KiIIer
KiIIer #10 Nov '08

lo que has escrito da mas errores... o.o

JuAn4k4
JuAn4k4 #11 Nov '08

En ningun momento he dicho que cojas lo que yo he puesto y plas ! funcione.

Como ya he dicho tengo 0 de idea de la sintaxis, los tipos que hay en javascript etc etc... pero lo que quiero que veas es la idea, que leas un poco el codigo que puse que hasta puse comentarios etc..

por ej. esto seguro que da error:

funciont Operador(valor){

y sera algo del estilo a

funciont Operador(String valor){

pero como tampoco lo se, pues no lo pongo.

Nose , mas cosas que peten :
if ( operacion == "")

seguramente funcione con clases y eso, y puede que sea algo mas parecido a esto:

if ( operacion.equal(""))

nose..

10 años después
mattshadow
mattshadow #12 Mar '19

Hola chicos,
Estoy haciendo una calculadora en js, mi primera calculadora en este lenguaje para web.
No es un problema, pero no se como hacerlo.
Tengo un input type buttom donde lo utiliza para calcular la potencia de un numero: 5² = 25. El caso es que quiero poner como texto en el atrbuto value: a elevado a n (an), no se si me explico. El caso es que no se como hacerlo. Teneis alguna idea?

Muchas gracias a todos ;)

ED: Vaya, creo que lleva tiempo sin hablar en este foro jaja. Llego un poco tarde xD

1 respuesta
eXtreM3
eXtreM3 #13 Mar '19

#12

$('input').val('5²');
1 1 respuesta
mattshadow
mattshadow #14 Mar '19

#13 Genial!!! Muchas gracias

Usuarios habituales

  • mattshadow
  • eXtreM3
  • JuAn4k4
  • KiIIer
  • Crawler
  • cabron