0

Soy aprendiz en Javascript y tengo un problema con las condiciones que le he puesto a los if/else en la funcion transferir() de mi código. Por alguna razón no me están funcionando. Se trata de un banco donde un usuario debe completar campos de tipo texto y select, donde se le pide:

  • Seleccionar banco de origen (select con opciones)
  • Número de cuenta de origen (input de tipo texto)
  • Seleccionar banco de destino (select con opciones)
  • Número de cuenta de destino (input de tipo texto)
  • Valor a transferir (input de tipo texto)

La idea es que se valide todo y cuando haga click en el botón "Transferir", se transfiera (pero antes debe haberse analizado las condiciones que coloqué). Agradezco de antemano quien me pueda ayudar. Quizas sea un problema con el orden o los operadores lógicos. Les dejo mi código:

JAVASCRIPT:

var banco_origen = document.getElementById("bOrigen"); 
var eleccion_origen = "";
banco_origen.addEventListener( "change", () => { eleccion_origen = banco_origen.options[banco_origen.options.selectedIndex].text } );

var banco_destino = document.getElementById("bDestino"); 
var eleccion_destino = "";
banco_destino.addEventListener( "change", () => { eleccion_destino = banco_destino.options[banco_destino.options.selectedIndex].text } );

var nro_cuenta_origen = document.getElementById("ctaOrigen");  
var nro_cuenta_destino = document.getElementById("ctaDestino");

var saldo = 300000;
var mostrar_saldo = document.getElementById("saldo_actual"); 
mostrar_saldo.innerHTML = "Su saldo actual es de $ " + saldo;

var monto_transferir = document.getElementById("monto");

var horita = new Date(); 
console.log(horita); 
document.getElementById("hora").innerHTML = horita.toLocaleTimeString(); 

var btnTransferir = document.getElementById("btnTransferir");
    btnTransferir.addEventListener("click", transferir);

function transferir(){

    // ----------------AQUÍ ES EL PROBLEMA-------------------------//

    if(nro_cuenta_origen == null || nro_cuenta_origen == 0 && nro_cuenta_destino == null || nro_cuenta_destino == 0) 
        {
            alert("Datos insuficientes para la transacción. Intente nuevamente con F5");
        }                                        

    else if (eleccion_origen == null || eleccion_origen == 0 && eleccion_destino == null || eleccion_destino == 0)  
        {
            alert("Datos insuficientes para la transacción. Intente nuevamente con F5");

        }
    else if (monto_transferir == 0 || monto_transferir == null) 
        {
            alert("Datos insuficientes para la transacción. Intente nuevamente con F5");

        }
    else 
        {
            alert("SE REALIZÓ LA TRANSFERENCIA");
        }

} 

2
  • En qué if sí entra y en cuál es en el que esperas que entre?
    – Sr1871
    Commented el 19 may. 2020 a las 6:45
  • Directamente es como si no me tomara ninguna condición que le pongo. Voy probando uno por uno (voy jugando un poco con el orden), y en algunos funciona y en otros no. Dependiendo el orden de cómo los rellene me tira el mensaje "Datos insuficientes para la transacción. Intente nuevamente con F5", sino (aunque falten datos) me tira "Se realizó la transferencia" (y eso no debería pasarme). La idea es que no se transfiera nada hasta que no se cumplan todas las condiciones que puse, pero evidentemente algo anda mal. Busqué por todos lados y no logro solucionarlo.
    – Lulú
    Commented el 19 may. 2020 a las 7:03

3 respuestas 3

1

El problema en tus reglas es que solo haces referencia con getElementById, pero no accedes al valor en si, en tus condicionales debes usar solo or, no and

function transferir() {
    if (nro_cuenta_origen.value == '' || nro_cuenta_destino.value == '') {
        alert("Datos insuficientes para la transacción. Intente nuevamente con F5 1");
    } else if (eleccion_origen == null || eleccion_origen == '' || eleccion_destino == null || eleccion_destino == '') {
        alert("Datos insuficientes para la transacción. Intente nuevamente con F5 2");

    } else if (monto_transferir.value == 0 || monto_transferir.value == '') {
        alert("Datos insuficientes para la transacción. Intente nuevamente con F5 3");

    } else {
        alert("SE REALIZÓ LA TRANSFERENCIA");
    }

}

Adjunto el ejemplo completo: aquí

3
  • Muchisimas gracias. Me ha funcionado. Quisiera consultarte por qué en este caso en mis condicionales debería usar solo OR. Gracias por tu tiempo
    – Lulú
    Commented el 19 may. 2020 a las 7:19
  • 1
    Con And estás diciendo que "todas las condiciones deben cumplirse para acceder al bloque" (ejm: nro_cuenta_origen es nulo y nro_cuenta_destino es nulo, en este caso accede si ambos son nulos, no solo uno de ellos) , en cambio con or indicas que "Basta con que se cumpla una condición para acceder al bloque" (ejm: nro_cuenta_origen es nulo o nro_cuenta_destino es nulo, en este caso accede solo sii uno de ellos es nulo) Commented el 19 may. 2020 a las 7:26
  • Una última consulta: Qué diferencia hay entre null, ' ' y el 0 . Gracias nuevamente y disculpa la molestia
    – Lulú
    Commented el 19 may. 2020 a las 8:29
1

Considera enviar los datos por ajax así en el ultimo donde esta el alert los envias quedaria de la siguiente manera y solo usa || no &&

Primero cambia el Input submit por uno tipo button y le colocas un id

        //Esta funcion es para devolver el elemento  
        //asi no tener que repetir el tan largo 
        //document.getElementById
var id = function(id){return document.getElementById(id)}; 

    function transferir(){

        // ----------------AQUÍ ES EL PROBLEMA

        if(nro_cuenta_origen == null || nro_cuenta_origen == 0 || nro_cuenta_destino == null || nro_cuenta_destino == 0) 
            {
                alert("Datos insuficientes para la transacción. Intente nuevamente con F5");
            }                                        

        else if (eleccion_origen == null || eleccion_origen == 0 || eleccion_destino == null || eleccion_destino == 0)  
            {
                alert("Datos insuficientes para la transacción. Intente nuevamente con F5");

            }
        else if (monto_transferir == 0 || monto_transferir == null) 
            {
                alert("Datos insuficientes para la transacción. Intente nuevamente con F5");

            }
        else 
            {


    const data = new FormData(id('AQUI COLOCAS EL ID DEL FORMULARIO'));

    const data = new FormData(document.getElementById('formulario'));

    fetch('Ruta a la que se deben enviar', {
       method: 'El metodo POST o GET',
       body: data
    })
    .then(function(response) {
       if(response.ok) {
           return response.text()
       } else {
           throw "Error en la llamada Ajax";
       }

    })
    .then(function(texto) {
       //Ejecuta codigo si todo fue correcto
    })
    .catch(function(err) {
       //Ejecuta codigo si algo salio mal
    });
     }

    } 
    id('Id del boton').addEventListener('click' , function(){
      transferir();
    }


//Puedes tambien enviar el formulario desde javascript sin ajax simplemente otra vez cambia el input submit por un button y luego 


   let id = function(id){
  return document.getElementById(id);
}

id('Aqui el id del boton').addEventListener('click', ()=>{
  id('aqui el id del formulario').submit()
}
0

Aqui tienes la version mejorada. A disfrutar.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background-color: #EDE5E2;
            padding: 10px;
            font-size: 25px;
            font-family: Arial;
        }

        .reloj {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .button {
            background-color: #9BF0E9;
            border: none;
            border-radius: 20px;
            color: black;
            font-weight: bold;
            outline: none;
            padding: 10px;
        }

        span {
            margin: 20px;
        }

        .formulario {
            background-color: #EA3556;
            border: solid 4px;
            padding: 10px;
            font-size: 25px;
            font-family: Arial;
        }

        .origen {
            float: left;
            border: solid;
            background-color: #ED146F;
            padding: 10px;
            margin: 5px;
            font-size: 18px;
            font-family: Arial;
            width: 45%;
            height: 190px;
        }

        .destino {
            float: right;
            border: solid;
            background-color: #EDDE45;
            padding: 10px;
            margin: 5px;
            font-size: 18px;
            font-family: Arial;
            width: 45%;
            height: 190px;
        }

        .etiquetas {
            width: 45%;
            float: left;
            padding: 5px;
        }

        .campos {
            width: 45%;
            float: right;
            padding: 5px;
        }

        .controles {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .casilla {
            width: 100%;
            background-color: #61D2D6;
            font-size: 15px;
            font-style: unset;
            color: #ED146F;
        }

        .casilla_reloj {
            border: none;
            width: 45%;
            font-size: 20px;
            font-family: Arial;
            background-color: #EA3556;
            color: #EDDE45;
            padding: 10px;
            margin: 10px;
        }

        .reloj {
            font-size: 20px;
            width: 100%;
        }

        #reloj {
            width: 45%;
            background-color: #EA3556;
            font-size: 20px;
            color: #EDDE45;
            text-align: center;
            padding: 10px;
            margin: 10px;
            border: none;
        }

        .hora_actual {
            padding: 10px;
            margin: 10px;
            width: 45%;
        }

        .hora_transferencia {
            padding: 10px;
            margin: 10px;
            width: 45%;
        }

        .texto_hora_actual {
            color: black;
            width: 45%;
            padding: 10px;
            margin: 10px;
        }

        .texto_hora_transferencia {
            color: black;
            padding: 10px;
            margin: 10px;
            width: 45%;
        }
    </style>

</head>

<body class="cuerpo">
    <form class="formulario">
        <div class="reloj">
            <div class="hora_actual">
                <label for="hora_actual" class="texto_hora_actual">Hora actual: </label>
                <input type="text" class="digitos_hora_actual" id="reloj">
            </div>

            <div class="hora_transferencia">
                <label for="hora_transferencia" class="texto_hora_transferencia">Hora transferencia:</label>
                <input type="text" class="casilla_reloj" id="hora" name="hora">
            </div>
        </div>
        <div class="origen">
            <div class="etiquetas">
                <label for="bOrigen">Banco origen:</label>
                <br>
                <br>
                <label for="ctaOrigen">Cuenta origen:</label>
                <br>
                <br>
                <label for="saldo_actual">Saldo actual:</label>
            </div>
            <div class="campos">
                <select class="casilla" id="bOrigen">
                    <option value="value1">Banco Popular</option>
                    <option value="value2" selected>BBVA</option>
                    <option value="value3">ING</option>
                </select>
                <br>
                <br>
                <input type="text" class="casilla" id="ctaOrigen" name="ctaOrigen">
                <br>
                <br>
                <input type="text" class="casilla" id="saldo_actual" name="saldo_actual" disabled>
                <br>
                <br>
            </div>
        </div>
        <div class="destino">
            <div class="etiquetas">
                <label for="bDestino">Banco destino:</label>
                <br>
                <br>
                <label for="ctaDestino">Cuenta destino:</label>
                <br>
                <br>
                <label for="monto">Cantidad a transferir:</label>
                <br>
                <br>
                <br>
            </div>
            <div class="campos">
                <select class="casilla" id="bDestino">
                    <option value="value1">Banco Popular</option>
                    <option value="value2">BBVA</option>
                    <option value="value3" selected>ING</option>
                </select>
                <br>
                <br>
                <input type="text" class="casilla" id="ctaDestino" name="ctaDestino">
                <br>
                <br>
                <input type="text" class="casilla" id="monto" name="monto">
                <br>
                <br>
                <br>
            </div>
        </div>
        <div class="controles">
            <span>
                <input type="submit" class="button" id="btnTransferir" value="Enviar transferencia">
            </span>
            <span>
                <input type="reset" class="button" id="btnRest" value="Reiniciar el formulario">
            </span>
        </div>
    </form>
    <script>
        function startTime() {

            today = new Date();

            h = today.getHours();

            m = today.getMinutes();

            s = today.getSeconds();

            m = checkTime(m);

            s = checkTime(s);

            document.getElementById("reloj").value = h + ": " + m + ": " + s;

            t = setTimeout("startTime() ", 500);
        }

        function checkTime(i) {
            if (i < 10) { i = "0" + i; } return i;
        }

        window.onload = function () { startTime(); }

        var banco_origen = document.getElementById("bOrigen");
        var eleccion_origen = "BBVA";
        banco_origen.addEventListener("change", () => { eleccion_origen = banco_origen.options[banco_origen.options.selectedIndex].text });

        var banco_destino = document.getElementById("bDestino");
        var eleccion_destino = "ING";
        banco_destino.addEventListener("change", () => { eleccion_destino = banco_destino.options[banco_destino.options.selectedIndex].text });

        var saldo = 300000;
        var mostrar_saldo = document.getElementById("saldo_actual");
        mostrar_saldo.value = saldo + "$";

        var horita = new Date();
        console.log(horita);
        document.getElementById("hora").value = horita.toLocaleTimeString();

        var btnTransferir = document.getElementById("btnTransferir");
        btnTransferir.addEventListener("click", transferir);

        function transferir() {
            var monto_transferir = document.getElementById("monto").value;
            var nro_cuenta_origen = document.getElementById("ctaOrigen").value;
            var nro_cuenta_destino = document.getElementById("ctaDestino").value;
            console.log("nro_cuenta_origen " + nro_cuenta_origen);
            console.log("nro_cuenta_destino " + document.getElementById("ctaDestino").value);
            console.log("monto_transferir " + monto_transferir);
            if (nro_cuenta_origen == null || nro_cuenta_origen == 0 || nro_cuenta_destino == null || nro_cuenta_destino == 0) {
                alert("Datos insuficientes para la transacción. Intente nuevamente con F5");
            }
            else if (eleccion_origen == null || eleccion_origen == 0 || eleccion_destino == null || eleccion_destino == 0) {
                alert("Datos insuficientes para la transacción. Intente nuevamente con F5");
            }
            else if (monto_transferir == 0 || monto_transferir == null) {
                alert("Datos insuficientes para la transacción. Intente nuevamente con F5");
            }
            else {
                saldo -= monto_transferir;
                mostrar_saldo.value = saldo + "$";
                alert("SE REALIZÓ LA TRANSFERENCIA SIGUIENTE: \n" +
                    " Banco origen:           " + eleccion_origen + "\n" +
                    " Banco destino:          " + eleccion_destino + "\n" +
                    " Cuenta origen:          " + nro_cuenta_origen + "\n" +
                    " Cuenta destino:         " + nro_cuenta_destino + "\n" +
                    " Cantidad transferida:   " + monto_transferir + "\n" +
                    " Saldo final en el Banco origen: " + saldo + "\n" +
                    " \nGRACIAS POR CONFIAR EN NUESTRO BANCO"

                );
            }
        }
    </script>
</body>

</html>

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.