Declarar variables con jquery

Citar

Escrito el 22 Ene 2012 05:56 pm

Hola, estoy probando una calculadora simple con jquery pero tengo algunos problemas para declarar las variables en jquery. El mismo ejemplo lo hice usando javascript y jquery y funciona pero usando solo jquery tengo problemas con las variables.
El primer ejemplo que pongo es el que funciona con javascript y jquery:

Código :

<HEAD>
<style>
p { /*--display:none;--*/ display:none;}
</style>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function equis(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b;
form.salida.value = c
}

$(document).ready(function(){
   $("#btnCalcu").click(function(){
   if ($("#a").val() == "" || $("#b").val() == "" ){
         $("p").css("display", "block");
         $("#salida").val("faltan datos");
      }else{
         $("p").css("display", "none");
      }
   });
  });
</script>
</head>

<body>
<center>
<form id="miformu">
<input type="number" size=4 value="" name="a" id="a"> 
<input type="number" size=4 value="" name="b" id="b">
<input type="button" value="calcular" id="btnCalcu" onClick="equis(this.form)">
El resultado es = 
<input type "number" value=0 name="salida" id="salida" size=9>
</form>
<p>Debe rellenar los campos para obtener el resultado</p>
</center>
</BODY>

En este segundo codigo es con el que tengo problemas puesto que intente prescindir del javascript y declarar las variables dentro del jquery (para entender un poco mas de su uso), pero no consigo hacerlo funcionar. Este es:

Código :

<HEAD>
<style>
p { /*--display:none;--*/ display:none;}
</style>
<script src="jquery-1.7.1.min.js" type="text/javascript">
$(document).ready(function(){
$a = $("#a").val();
$b = $("#b").val();
$c = $a + $b;
$("#salida").val("$c");
                     
   $("#btnCalcu").click(function(){
   if ($("#a").val() == "" || $("#b").val() == "" ){
         $("p").css("display", "block");
         $("#salida").val("faltan datos");
      }else{
         $("p").css("display", "none");
      }
   });
  });
</script>
</head>

<body>
<center>
<form id="miformu">
<input type="number" size=4 value="" name="a" id="a"> 
<input type="number" size=4 value="" name="b" id="b">
<input type="button" value="calcular" id="btnCalcu" onClick="equis(this.form)">
El resultado es = 
<input type "number" value=0 name="salida" id="salida" size=9>
</form>
<p>Debe rellenar los campos para obtener el resultado</p>
</center>
</BODY>

La cuestión sería que debo declarar las variables "a" y "b" segun lo que introduzca el usuario y sumarlas en "salida". Quiza alguién me pueda ayudar en esto.
Gracias por adelantado.

Por celentano

Claber

123 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 22 Ene 2012 07:45 pm

Bueno, salta a la vista en la segunda versión de tu código que te has olvidado de cerrar el tag <script> que carga JQuery y abrir el tag <script> para encerrar el código estático.
Además no existe ninguna función llamada "equis" y que por tanto cuando haces clic en el botón el interprete de JS se quejará.

Pero es que tampoco veo razón para declarar variable alguna ya que en el evento click de JQuery bien podrías hacer algo como esto:

Código Javascript :

$("#salida").val(parseInt($("#a).val())+parseInt($("#c).val()));

Salvando lo dicho al inicio, el problema con el código es que estás haciendo el cálculo no cuando el visitante hace clic en el botón, sino cuando el documento termina de cargarse, evidentemente en ese momento los inputs no tendrán ningún valor con los cuales operar. El cálculo de cualquier forma debes hacerlo en el evento clic de JQuery.

Suponiendo que quieres almacenar el resultado de la suma para un proceso posterior, entonces:

Código HTML :

<!DOCTYPE html><!-- HTML5 is good! -->
<html>
<HEAD>
<title>Suma con JQuery</title>
<style>
p { /*--display:none;--*/ display:none;}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script  type="text/javascript">
var c = 0;
$(document).ready(function(){
   $("#btnCalcu").click(function(){
      if ($("#a").val() == "" || $("#b").val() == "" ){
           $("p").css("display", "block");
           $("#salida").val("faltan datos");
      }else{
         c = parseInt($("#a").val())+parseInt($("#b").val());
         $("#salida").val(c);
         $("p").css("display", "none");
      }
   });
  });
</script>
</head>

<body>
<form id="miformu">
<input type="number" size=4 value="" name="a" id="a" /> 
<input type="number" size=4 value="" name="b" id="b" />
<input type="button" value="calcular" id="btnCalcu" />
El resultado es = 
<input type "number" value=0 name="salida" id="salida" size=9 />
</form>
<p>Debe rellenar los campos para obtener el resultado</p>
</BODY>
</html>

En la variable global "c" tendrás el resultado de la suma.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 23 Ene 2012 09:32 pm

Ante todo, gracias por la respuesta. Me doy cuenta ahora que el script de jquery no debe incluir la programacion en si. Es algo que pensaba se podia hacer y asi ahorrarse un script. Como digo me parece muy bien tu propuesta pero veo que por alguna razon no efectua la suma. Voy a seguir probando por ver cual pudiera ser el error. Tal vez lo descubras antes que yo.
Gracias de nuevo

Por celentano

Claber

123 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 23 Ene 2012 10:04 pm

Bueno, he revisado todo y esta perfectamente. El error era debido a la ruta del jquery. Por lo demás funciona perfectamente. Muchas gracias de nuevo

Por celentano

Claber

123 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Declarar variables con jquery

Escribe una respuesta rapida