5

Estoy intentando simular un cajero automático sencillo, en el que se pueda depositar, retirar y consultar el saldo.

Bien, lo he estado haciendo por medio de inputs usando , pero mi código no funciona.

He aquí el código, por favor díganme en qué estoy mal.

        var saldo = 0,
          deposito, retiro;

        function depositar() {
          deposito = document.getElementByName("deposito").value;
          saldo = saldo + deposito;
        }

        function retirar() {
          retiro = document.getElementByName("retirar").value;
          if (retiro > saldo) {
            alert("Su fondo disposible no es suficiente");
          } else {
            saldo = saldo - retiro;
          }
        }

        function verificar() {
          document.getElementByName("verificar").value = saldo;
        }
    <form action="" method="post">
        <input type="text" name="deposito" placeholder="Ingrese un deposito" />

        <input type="submit" value="Depositar" onclick="depositar()">
        </br>
        </br>
        su saldo actual es</br>
        <input tupe "text" name "verificar" onclick="verificar()">
        <input type="submit" value="verificar">
        </br>
        </br>
        <input type="text" name="retirar" onclick="retirar()">
        <input type="submit" value="retirar">
    </form>

1
  • tu código tiene errores: <input tupe "text" name "verificar" Commented el 28 dic. 2015 a las 17:05

4 respuestas 4

10

En el código hay los siguientes errores:

1. Error de tipeo

Dice tupe "text", debe decir type="text". También dice name "verificar", debe decir name="verificar"

Corrección:

<input type="text" name="verificar" onclick="verificar()">

2. Usar type="button"

Cambia el type de los botones a button. Ya que todo el código es por lado cliente, no necesitas que el botón haga un POST HTTP así que conviene más usar type="button"

Correcciones:

<input type="button" value="Depositar" onclick="depositar()">

...

<input type="button" value="verificar">

...

<input type="button" value="retirar">

3. Ubicación de los onclick handlers

Los onclick de verficar y retirar deben ir el los botones y no en las cajas de texto

Correcciones:

<input type="button" value="verificar" onclick="verificar()">

...

<input type="button" value="retirar" onclick="retirar()">

4. Método inexistente

No existe document.getElementByName. El método correcto es getElementsByName con Elements en plural. Debido a que devuelve un array con varios resultados debes escoger el primer elemento que es el que tiene el input que estás buscando

Correcciones:

deposito = document.getElementsByName("deposito")[0].value;

...

retiro = document.getElementsByName("retirar")[0].value;

...

document.getElementsByName("verificar")[0].value = saldo;

5. Colisión de nombres

Los inputs verificar y retirar se llaman igual que las funciones. Tienes que ponerles nombres diferentes ya están haciendo conflicto a la hora de ejecutar el onclick()

Por ejemplo yo les he cambiado el nombre a los inputs en su declaración y en el código javascript.

Correcciones:

function retirar() {
    retiro = parseFloat(document.getElementsByName("retiro")[0].value);
    ...
}

...

function verificar() {
    document.getElementsByName("verificacion")[0].value = saldo;
}

...

<input type="text" name="verificacion">

...

<input type="text" name="retiro" >

6. Validación de los input

El usuario podría ingresar valores que no son números en los inputs por lo que conviene validarlos con la función isNaN()

Por ejemplo si el valor ingresado no es un número se muestra una alert con el mensaje de error.

function depositar() {
    deposito = parseFloat(document.getElementsByName("deposito")[0].value);

    if (isNaN(deposito)) {
        alert("El valor ingresado no es número válido");
        return;
    }

    saldo = saldo + deposito;
}

function retirar() {
    retiro = parseFloat(document.getElementsByName("retiro")[0].value);

    if (isNaN(retiro)) {
        alert("El valor ingresado no es número válido");
        return;
    }

    if (retiro > saldo) {
        alert("Su fondo disposible no es suficiente");
        return;
    }

    saldo = saldo - retiro;    
}

7. Tag malformado

El tag </br> está malformado. Lo correcto es <br />

8. Errores de consistencia

El texto de los botones es inconsistente. "Depositar" comienza con mayúsculas pero "verficar" y "retirar" están en minúsculas

Correcciones:

<input type="button" value="Verificar" onclick="verificar()">

...

<input type="button" value="Retirar" onclick="retirar()">

El código completo te lo muestro a continuación:

    var saldo = 0,
    deposito, retiro;

    function depositar() {
        deposito = parseFloat(document.getElementsByName("deposito")[0].value);

        if (isNaN(deposito)) {
            alert("El valor ingresado no es número válido");
            return;
        }

        saldo = saldo + deposito;
    }

    function retirar() {
        retiro = parseFloat(document.getElementsByName("retiro")[0].value);

        if (isNaN(retiro)) {
            alert("El valor ingresado no es número válido");
            return;
        }

        if (retiro > saldo) {
            alert("Su fondo disposible no es suficiente");
            return;
        }

        saldo = saldo - retiro;    
    }

    function verificar() {
        document.getElementsByName("verificacion")[0].value = saldo;
    }
<form action="" method="post">
    <input type="text" name="deposito" placeholder="Ingrese un deposito" />

    <input type="button" value="Depositar" onclick="depositar()">
    <br />
    <br />
    su saldo actual es<br />
    <input type="text" name="verificacion">
    <input type="button" value="Verificar" onclick="verificar()">
    <br />
    <br />
    <input type="text" name="retiro" >
    <input type="button" value="Retirar" onclick="retirar()">
</form>

10
  • Bravo!! qué respuesta más completa, muy agradecido con usted amigo!
    – Power_HR
    Commented el 28 dic. 2015 a las 19:44
  • Si te pareció buena puedes votar por esta respuesta, y/o aceptarla =) Commented el 28 dic. 2015 a las 19:56
  • Claro que sí, podría explicarme cómo hago eso? y con mucho gusto
    – Power_HR
    Commented el 28 dic. 2015 a las 20:22
  • Para votar puedes hacer clic en la triángulo hacia arriba que está al comienzo de la pregunta en el lado izquierdo. Y para aceptarla puedes hacer clic en el check blanco que sale debajo de las flechas. Si otras respuestas también te sirvieron puedes votar por varias, pero solo puedes escoger una como la aceptada. Escoge la que mas te convenza. Puedes leer mas sobre esto en el Tour. Commented el 28 dic. 2015 a las 20:29
  • Listo! aun no tengo 15 de reputación por eso no la aparecerá, pero el check ya
    – Power_HR
    Commented el 28 dic. 2015 a las 20:32
3

Tienes una serie de errores en tu código. Es getElementsByName con s, en plural, recuerda que devolverá un array, por ende sería document.getElementsByName("deposito")[0].value ya que deseamos el primer elemento por ejemplo.

La línea <input tupe"text" name"verificar" onclick="verificar()"> es type y name necesita el =. Lo que quedaría <input type="text" name="verificar" onclick="verificar()">.

Por último necesitas usar parseFloat o parseInt para que pueda servir la suma y la resta, sino concatena los valores, o en su defecto usar input type='number';

var saldo = 0, deposito, retiro;

function depositar() {
  deposito = document.getElementsByName("deposito")[0].value;
  saldo = (parseFloat(saldo) + parseFloat(deposito));
  verificar();
}

function retirar() {
  retiro = document.getElementsByName("retirar")[0].value;
  if (retiro > saldo) {
    alert("Su fondo disposible no es suficiente");
  } else {
    saldo = (parseFloat(saldo) - parseFloat(retiro));
    verificar();
  }
}

function verificar() {
  document.getElementsByName("verificar")[0].value = saldo;
}

Demo en vivo

Nota: modifique el ejemplo para que no use un form sino un div, para que lo veas mejor.

1

Para efectos de tus pruebas no deberías estar usando <input type="submit" .. /> ya que, según veo, todo lo quieres hacer por el lado del cliente, es decir, no veo en tu código ninguna vista/cotrolador que reciba tu POST.

Por lo tanto con esto bastaría para tus pruebas:

<html>

<head>
  <title>Banquito</title>
</head>

<body>
  <form action="" method="post">
    <input type="text" name="deposito" placeholder="Ingrese un deposito">
    <button type="button" onclick="depositarDinero()">Depositar</button>
    </br>
    </br>
    Su saldo actual es</br>
    <input type="text" name="verificar">
    <button type="button" onclick="verificarSaldo()">Verificar</button>
    </br>
    </br>
    <input type="text" name="retirar">
    <button type="button" onclick="retirarDinero()">Retirar</button>
  </form>
  <script type="text/javascript">
    var saldo = 0;

    function depositarDinero() {
      var deposito = parseInt(document.getElementsByName("deposito")[0].value);
      saldo += deposito;
    }

    function retirarDinero() {
      var retiro = parseInt(document.getElementsByName("retirar")[0].value);
      if (retiro > saldo) {
        alert("Su fondo disposible no es suficiente");
      } else {
        saldo -= retiro;
      }
    }

    function verificarSaldo() {
      document.getElementsByName("verificar")[0].value = saldo;
    }
  </script>
</body>

</html>

Notas:

  • El método onclick debe ir en el <button onclick="funcion()" y no el <input type="text">
  • Las variables deposito y retiro no deberían ser globales ya que solo las usas en el scope de tus funciones.
  • Estoy usando parseInt para parsear los depósitos y retiros pero tal vez esto te quede chico cuando empieces a usar fracciones
  • Es recomendable que pongas los scripts en la parte final de tu body
  • El método correcto es getElementsByName como mencionó @rnrneverdies
2
  • Muchas gracias amigo!! muy completa tu respuesta. He corregido todo a como me aconsejas, pero sigue sin hacer nada cuando doy click en los botones
    – Power_HR
    Commented el 28 dic. 2015 a las 17:11
  • @Power_HR que raro, el snippet funciona muy bien, intenta copiar todo y pegarlo en tu template
    – César
    Commented el 28 dic. 2015 a las 18:10
-1

        var saldo = 0,
          deposito, retiro;

        function depositar() {
          deposito = document.getElementByName("deposito").value;
          saldo = saldo + deposito;
        }

        function retirar() {
          retiro = document.getElementByName("retirar").value;
          if (retiro > saldo) {
            alert("Su fondo disposible no es suficiente");
          } else {
            saldo = saldo - retiro;
          }
        }

        function verificar() {
          document.getElementByName("verificar").value = saldo;
        }
    <form action="" method="post">
        <input type="text" name="deposito" placeholder="Ingrese un deposito" />

        <input type="submit" value="Depositar" onclick="depositar()">
        </br>
        </br>
        su saldo actual es</br>
        <input tupe "text" name "verificar" onclick="verificar()">
        <input type="submit" value="verificar">
        </br>
        </br>
        <input type="text" name="retirar" onclick="retirar()">
        <input type="submit" value="retirar">
    </form>

1
  • Hola escorreky. Por favor brinda una explicación para tu código, porque no se comprende mucho a simple vista lo que intentas realizar.
    – user227
    Commented el 31 ago. 2016 a las 5:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.