1

Tengo un problema con los 2 select y los 3 input que tengo en mi HTML. Quiero hacer un console.log de todos ellos para ver si me toma bien los valores, pero: - En los select solo me muestra "banco argentina" que es la primer opción (cuando selecciono otros bancos, el console.log tambien me tira "banco argentina") - Respecto a los input, directamente el console.log no me funciona, es decir, no me muestra nada por consola. Ni siquiera me tira un error. Agradezco su tiempo de antemano para poder ayudarme. Saludos!

HTML:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>BANCO ARGENTINA</title>
</head>
<body>
    <h1>BANCO ARGENTINA</h1>
    <p>
        <img src="banco.png" />
    </p> 

    <form>
        <p> Digite el usuario: <input type="text" id= "usuario"> </p>
        <p> Digite la clave: <input type="number" id= "passUsuario" /> </p>
        <p><input type="button" value= "Aceptar" id="btnAceptar" /></p>

    </form>
    <hr>

    <p>Seleccione banco de origen:
        <select name = "bOrigen" id="bOrigen">
            <option value= "1"> Banco Argentina </option>
            <option value= "2"> Banco Galicia </option>
            <option value= "3"> Banco BBVA </option>
            <option value= "4"> Banco Córdoba </option>
        </select>
    </p>

    <p>Número de cuenta Origen (del 1 al 5. Un valor diferente se tendrá como una cuenta inválida): 
        <input type="number" id="ctaOrigen" min="1" max="5"/> </p>


    <hr>

    <p>Seleccione banco de Destino
        <select name= "bDestino" id="bDestino">
            <option value= "5"> Banco Argentina </option>
            <option value= "6"> Banco Galicia </option>
            <option value= "7"> Banco BBVA </option>
            <option value= "8"> Banco Córdoba </option>
        </select>
    </p>

    <p>Número de cuenta Destino (del 1 al 5. Un valor diferente se tendrá como una cuenta inválida): 
        <input type="number" id="ctaDestino" min="1" max="5"/> </p>


    <hr>

    <p id= saldo_actual>Su saldo actual es de $:</p>

    <p>Valor a transferir: <input type="number" id="monto"/> </p>

    <p><input type="button"value="TRANSFERIR..." id="btnTransferir"/></p>


    <script src= "bank.js"></script>
</body>
</html>

JAVASCRIPT:

var usuarioEnBD = "lu";
var passEnBD = 123456;

var txtUsuario = document.getElementById("usuario");
var txtPass = document.getElementById("passUsuario");
var btnAceptar = document.getElementById("btnAceptar"); 
btnAceptar.addEventListener("click", login);


function login(){
    usuario = txtUsuario.value; 
    console.log(usuario);

    pass = parseInt(txtPass.value);
    console.log(pass);

    if(usuario == "lu" && pass == 123456 ){
        alert("Bienvenido a Banco Argentina, ya puede comenzar a utilizar nuestro servicio de transferencias");
        limpiarCampos();

    }
    else {
        alert("Clave o usuario inválidos. Por favor intente nuevamente");
        limpiarCampos();
    }
}

function limpiarCampos(){
    txtUsuario.value = "";
    txtPass.value = "";
}


var banco_origen = document.getElementById("bOrigen").value; //para obtener el valor del select
var combo = document.getElementById("bOrigen");
var selected = combo.options[combo.selectedIndex].text; //para obtener el texto del select

var banco_destino = document.getElementById("bDestino").value; //para obtener el valor del select
var combo2 = document.getElementById("bDestino");
var selected2 = combo2.options[combo2.selectedIndex].text; //para obtener el texto del select


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

var saldo = 300000;

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


function transferir(){

    console.log("Saldo cuenta:" + saldo);

    //ACA EMPIEZA EL PROBLEMA CON LOS SELECT:
    console.log("Banco origen: " + selected); //banco origen
    console.log("Banco destino: " + selected2); //banco destino


    //ACÁ EMPIEZA EL PROBLEMA CON LOS INPUT:
    console.log("Nro cuenta origen: " + nro_cuenta_origen);
    console.log("Nro cuenta destino: " + nro_cuenta_destino);
    console.log(monto_transferir);


}

1 respuesta 1

1
  • Para poder leer el valor que el usuario toma del select debes detectarlo a través del evento change, mismo que lograrás esuchar a través de un event listener a cada uno de esos select
    • Pues al momento solo te muestra Banco de Argentina por que con la línea de código que tienes ese es el primer valor encontrado y asignado a las variables en cuestión, es decir no hay modo (con tu código actual) que sepa cuando ese valor ha cambiado por otro distinto a....
  • Para el caso de los valores ingresados en el monto a transferir y los números de cuenta, debes mover el acceso a la propiedad value hasta el final dentro del contexto de la función, en específico de la función transferir()
  • Opcionalmente trata de usar como identificador de variables el prefijo let en lugar de var

Tu código:

     <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>BANCO ARGENTINA</title>
    </head>
    <body>
        <h1>BANCO ARGENTINA</h1>
        <p>
            <img src="banco.png" />
        </p> 
    
        <form>
            <p> Digite el usuario: <input type="text" id= "usuario"> </p>
            <p> Digite la clave: <input type="number" id= "passUsuario" /> </p>
            <p><input type="button" value= "Aceptar" id="btnAceptar" /></p>
    
        </form>
        <hr>
    
        <p>Seleccione banco de origen:
            <select name = "bOrigen" id="bOrigen">
                <option value= "1"> Banco Argentina </option>
                <option value= "2"> Banco Galicia </option>
                <option value= "3"> Banco BBVA </option>
                <option value= "4"> Banco Córdoba </option>
            </select>
        </p>
    
        <p>Número de cuenta Origen (del 1 al 5. Un valor diferente se tendrá como una cuenta inválida): 
            <input type="number" id="ctaOrigen" min="1" max="5"/> </p>
    
    
        <hr>
    
        <p>Seleccione banco de Destino
            <select name= "bDestino" id="bDestino">
                <option value= "5"> Banco Argentina </option>
                <option value= "6"> Banco Galicia </option>
                <option value= "7"> Banco BBVA </option>
                <option value= "8"> Banco Córdoba </option>
            </select>
        </p>
    
        <p>Número de cuenta Destino (del 1 al 5. Un valor diferente se tendrá como una cuenta inválida): 
            <input type="number" id="ctaDestino" min="1" max="5"/> </p>
    
    
        <hr>
    
        <p id= saldo_actual>Su saldo actual es de $:</p>
    
        <p>Valor a transferir: <input type="number" id="monto"/> </p>
    
        <p><input type="button"value="TRANSFERIR..." id="btnTransferir"/></p>
    
    
    <script>
    let usuarioEnBD = "lu";
    let passEnBD = 123456;
    
    let txtUsuario = document.getElementById("usuario");
    let txtPass = document.getElementById("passUsuario");
    let btnAceptar = document.getElementById("btnAceptar"); 
    btnAceptar.addEventListener("click", login);
    
    
    function login(){
        usuario = txtUsuario.value; 
        console.log(usuario);
    
        pass = parseInt(txtPass.value);
        console.log(pass);
    
        if(usuario == "lu" && pass == 123456 ){
            alert("Bienvenido a Banco Argentina, ya puede comenzar a utilizar nuestro servicio de transferencias");
            limpiarCampos();
    
        }
        else {
            alert("Clave o usuario inválidos. Por favor intente nuevamente");
            limpiarCampos();
        }
    }
    
    function limpiarCampos(){
        txtUsuario.value = "";
        txtPass.value = "";
    }
    
    
    /*Modificación 1*/
    let banco_origen = document.getElementById("bOrigen")
    let eleccion = ""
    
    banco_origen.addEventListener("change", () => {
      eleccion = banco_origen.options[banco_origen.options.selectedIndex].text
    })
    
    /*Modificación 2*/
    let banco_destino = document.getElementById("bDestino")
    let eleccion2 = ""
    
    banco_destino.addEventListener("change", () => {
      eleccion2 = banco_destino.options[banco_destino.options.selectedIndex].text
    })
    
    let nro_cuenta_origen = document.getElementById("ctaOrigen");  
    let nro_cuenta_destino = document.getElementById("ctaDestino");
    
    let saldo = 300000;
    
    let monto_transferir = document.getElementById("monto");
    let btnTransferir = document.getElementById("btnTransferir");
        btnTransferir.addEventListener("click", transferir);
    
    
    function transferir(){
    
        console.log("Saldo cuenta:" + saldo);
    
        //ACA EMPIEZA EL PROBLEMA CON LOS SELECT:
        console.log("Banco origen: " + eleccion); //banco origen
        console.log("Banco destino: " + eleccion2); //banco destino
    
    
        //ACÁ EMPIEZA EL PROBLEMA CON LOS INPUT:
        console.log("Nro cuenta origen: " + nro_cuenta_origen.value);
        console.log("Nro cuenta destino: " + nro_cuenta_destino.value);
        console.log(monto_transferir.value);
    
    
    }  
    </script>
    </body>
    </html>

1
  • Muchas gracias por tu respuesta. Has podido ayudarme a solucionar mi inconveniente. Saludos!
    – Lulú
    Commented el 18 may. 2020 a las 0:03

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.