0

estoy aprendiendo JavaScript y estoy algo perdido. Intente mil maneras pero quisiera que el valor que le asigno dentro de una función a una variable lo puedo usar afuera de esta.

Para resumir, este es el resultado que quiero, peroooo si yo quisiera tomar el valor que asigna el Usuario por la zona seleccionada, no puedo por que la variable origenUsuario esta declarada de la funcion userCapture()

    function userCapture() {
        let userSelected = document.getElementById('formSelec')
        origenUsuario = userSelected.value
        document.getElementById('origenSeleccionado').innerText = "Ud selecciono la zona " + origenUsuario
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <title>JS CoderH</title>
</head>

<body>

    <h1>Hola Mundo</h1>
    <p>Curso JS</p>

    <form id="barrios">
        <select id="formSelec" onchange="userCapture()">
            <option selected value="0" disabled>Selecciona la zona de Origen</option>
            <option value="1">CABA</option>
            <option value="2">Zona Norte</option>
            <option value="3">Zona Oeste</option>
            <option value="4">Zona Sur</option>
            <option value="5">La Plata</option>
            <option value="6">Mar del Plata</option>
            <option value="7">Cordoba</option>
        </select>
       
    </form>

    <h1 id="origenSeleccionado"></h1>
   
</body>

</html>

Ahora si llamara la variable origenUsuario por fuera de la funcion, como lo hago en este ejemplo. no tengo el mismo resultado y no me cambia el valor de la misma- Y esto me serviria para poder usar la seleccion del usuario en otros calculos.

    function userCapture() {
        let userSelected = document.getElementById('formSelec')
        origenUsuario = userSelected.value
    }

    userCapture()
    var origenUsuario
    document.getElementById('origenSeleccionado').innerText = "Ud selecciono la zona " + origenUsuario
  <!DOCTYPE html>
<html lang="en">
<head>
    <title>JS CoderH</title>
</head>

<body>

    <h1>Hola Mundo</h1>
    <p>Curso JS</p>

    <form id="barrios">
        <select id="formSelec" onchange="userCapture()">
            <option selected value="0" disabled>Selecciona la zona de Origen</option>
            <option value="1">CABA</option>
            <option value="2">Zona Norte</option>
            <option value="3">Zona Oeste</option>
            <option value="4">Zona Sur</option>
            <option value="5">La Plata</option>
            <option value="6">Mar del Plata</option>
            <option value="7">Cordoba</option>
        </select>
    </form>

    <h1 id="origenSeleccionado"></h1>
  
</body>

</html>

Ya intente de mil maneras. Alguien que me pueda dar una mano a obtener el mismo resultado llamando a la variable fuera de la función como en el primer ejemplo lo agradecería!! Buenas noches coders!

1 respuesta 1

0

Creo que estas complicando las cosas demasiado o estas pensando demasiado en el resultado, realmente asi como lo tienes deberia funcionar, es mas, hacer llamadas directamente a algo que se encuentra relacionado a un evento oyente yo consideraria realmente que no tiene mucho sentido, asi como lo estas haciendo aqui:

userCapture()
var origenUsuario
document.getElementById('origenSeleccionado').innerText = "Ud selecciono la zona " + origenUsuario

Lo digo por 2 cosas principalmente:

  1. Como esas acciones que están por fuera de la función no están ligadas a ninguna función solo se ejecutaran una vez, por supuesto se ejecutaran apenas el script se cargue, lo cual por supuesto no viene bien, pues se supone que nada mas cargar la ventana el usuario aun no ha seleccionado nada.

  2. La clave esta en que las acciones o calculos que tengas que hacer esten ligados siempre a un evento oyente, de esta manera siempre que el usuario haga "X" cosa tu siempre vas a tener disponible la info mas actualizada disponible por parte del usuario.

Por ejemplo, este es tu codigo tal cual asi lo tienes, nada mas hice 3 cosas:

  • Le agregue un boton y al boton un evento ligado a una funcion llamada mostrarOpcion.

  • Cree una funcion llamada mostrarOpcion la cual basicamente simplemente ejecuta la anterior funcion que creaste para poder hacer uso de esa informacion.

  • Reformule un poco el codigo que tenias de tu funcion userCapture.

Coloque el boton principalmente para que vieras que enrealidad tu codigo si que esta cambiando el contenido de tu variable, lo que ocurre es algo que voy a explicar despues del snippet:

let origenUsuario;

function userCapture() {
    const userSelected = document.getElementById('formSelec')
    const orgSelected = document.getElementById('origenSeleccionado');
    origenUsuario = userSelected.value;
    orgSelected.innerText = "Ud selecciono la zona " + origenUsuario;
    return origenUsuario;
}

function mostrarOpcion(){
  alert(userCapture());
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>JS CoderH</title>
</head>

<body>

    <h1>Hola Mundo</h1>
    <p>Curso JS</p>

    <form id="barrios">
        <select id="formSelec" onchange="userCapture()">
            <option selected value="0" disabled>Selecciona la zona de Origen</option>
            <option value="1">CABA</option>
            <option value="2">Zona Norte</option>
            <option value="3">Zona Oeste</option>
            <option value="4">Zona Sur</option>
            <option value="5">La Plata</option>
            <option value="6">Mar del Plata</option>
            <option value="7">Cordoba</option>
        </select>
       
    </form>

    <h1 id="origenSeleccionado"></h1>
    <button onclick = "mostrarOpcion()">Mostrar seleccion!</button>
   
</body>

</html>

Realmente no creo que sea necesario tener ese boton, pero la idea es que si quieres hacer calculos ten en cuenta que estos datos JAMAS estarán disponibles hasta que el evento change de tu input no se ejecute, lo mas probable es que tu en el código estas intentado acceder directamente a alguna opción seleccionada sin que el usuario haya seleccionado previamente ninguna opción, por ende al ejecutar tu funcion userCapture esta te va a devolver algo que no deseas.

Por ende no tienes disponible informacion o tu variable queda como undefined.

Mi consejo por ende es:

Usa los eventos a tu favor

Haz los calculos que necesites mediante un evento que se dispare, es decir, encierra todo el codigo en el que tenga que ejecutarse algun tipo de calculo que dependa de que el usuario seleccione algo en el input.

Por ejemplo, yo lo que haria es lo siguiente, digamos que yo quiero hacer una simple suma teniendo en cuenta la opcion que selecciono el usuario, y esto quiero hacerlo automaticamente cada vez que la seleccion cambia.

Entonces yo crearia una funcion suma la cual hara ese calculo, se que es un poco extremista ya que es una funcion muy sencilla, pero eso de crear otra funcion te servira para no solo tener el codigo mas organizado y limpio, si no a la vez que no te confundas tan facil, esto obviamente seria para funciones muy complejas y largas, checa esto:

let origenUsuario;

function userCapture() {
    const userSelected = document.getElementById('formSelec')
    const orgSelected = document.getElementById('origenSeleccionado');
    origenUsuario = userSelected.value | 0;
    orgSelected.innerText = "Ud selecciono la zona " + origenUsuario;
    suma(4);
}

function suma(num){
  console.log(origenUsuario + num);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>JS CoderH</title>
</head>

<body>

    <h1>Hola Mundo</h1>
    <p>Curso JS</p>

    <form id="barrios">
        <select id="formSelec" onchange="userCapture()">
            <option selected value="0" disabled>Selecciona la zona de Origen</option>
            <option value="1">CABA</option>
            <option value="2">Zona Norte</option>
            <option value="3">Zona Oeste</option>
            <option value="4">Zona Sur</option>
            <option value="5">La Plata</option>
            <option value="6">Mar del Plata</option>
            <option value="7">Cordoba</option>
        </select>
       
    </form>

    <h1 id="origenSeleccionado"></h1>
   
</body>

</html>

Y asi haria el calculo yo.

Por cierto, si te preguntas que es esto de aqui:

origenUsuario = userSelected.value | 0;

Simplemente es una conversión binaria rápida a numero ya que la propiedad value aparentemente se reconoce como texto, y pues estaban pasando cosas raras si no se convertia a numero, asi que con ayuda de un pipe (|) y cualquier numero como el 0 pasamos de cadena a numero, ya que esa cadena es interpretable como numero.

2
  • Posdata, recuerda que javascript es un lenguaje principalmente funcional imperativo lo que quiere decir que la mayor parte de instrucciones deberian ir encapsuladas por funciones como buena practica, por ende tener codigo suelto no solo hace mas feo el codigo si no que ademas empeora la legibilidad etc, por este motivo se tienen normalmente 4 secciones en un codigo limpio: 1.) seccion de importaciones (si las hay), 2.) Seccion de variables globales y constantes 3.) seccion de funciones (la mas larga), 4.) ejecucion de funciones.
    – Layer
    el 9 nov. 2020 a las 3:48
  • Inclusive normalmente se tiende a crear una funcion que se encargue de ejecutar las demas funciones que se deben ejecutar nada mas cargar la pagina, para poder asi solo llamar a una funcion en el scope global de lo contrario tendras muchas llamadas de funciones en el ambito global, la idea es tener el ambito global lo mas limpio posible.
    – Layer
    el 9 nov. 2020 a las 3:51

Tu Respuesta

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

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