[Duda] Duda de challenge encriptador

¡Hola Estudiante!

Gracias por compartir tu duda con nosotros. Parece que estás experimentando un comportamiento extraño en tu código.

Puede ser que el problema sea porque estás declarando la variable textoInicial fuera del evento click del botón. Esto significa que, cuando haces el console.log(textoInicial) fuera del evento click, la variable aún no ha sido asignada y, por lo tanto, es undefined.

Cuando haces click en el botón, la variable textoInicial se asigna correctamente y se muestra en la consola. Sin embargo, debido a que el botón es un botón de envío de formulario, la página se recarga automáticamente después de hacer click. Esto significa que se vuelve a cargar el script y se vuelve a declarar la variable textoInicial con su valor predeterminado, que es undefined. Por eso ves que la consola muestra una línea vacía después de la recarga de la página.

Para solucionar este problema, puedes mover la declaración de la variable textoInicial dentro del evento click del botón. De esta manera, la variable se asignará correctamente cada vez que hagas click en el botón. Aquí te muestro cómo quedaría el código corregido:

let button = document.getElementById("encriptar");

button.addEventListener("click", function() {
    let textoInicial = document.getElementById("texto-a-encriptar").value;
    console.log(textoInicial);
    return textoInicial;
});

Con esta corrección, el valor del texto introducido en el <textarea> se asignará correctamente a la variable textoInicial y se mostrará en la consola cada vez que hagas click en el botón.

Espero que esta solución te sea útil. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Buena suerte con tu proyecto de encriptación!

Espero haber ayudado y buenos estudios!

Hola gracias por la respuesta!

Intente usar el codigo estableciendo la declarción de la variable dentro del evento click, y el problema continua, veo que si se asigna correctamente el valor del textarea a la variable, porque el console.log lo imprime correctamente, pero despues de un segundo desaparece.

Creo que si se esta recargando la pagina inmediatamente despues de correr el evento click y no me permite usar el valor guardado en la variable... Hay alguna forma de prevenir que lapagina se auto recaargue despues de hacer click en el boton?

Mi nuevo codigo es el sigiente:

let button = document.getElementById("encriptar");
    let textoEncriptar;

    textoEncriptar =  button.addEventListener("click", function() {
        let textoInicial = document.getElementById("texto-a-encriptar").value;
        console.log(textoInicial);
        return textoInicial;
    });
    console.log(textoEncriptar);

Sí, es posible evitar que la página se recargue después de hacer clic en un botón utilizando JavaScript. Puedes lograrlo interceptando el evento de clic del botón y llamando al método preventDefault() en el evento. Aquí tienes un ejemplo de cómo hacerlo:

HTML:

<button id="miBoton">Haz clic aquí</button>

JAVASCRIPT:

document.getElementById("miBoton").addEventListener("click", function(evento) {
  evento.preventDefault(); // Evita que la página se recargue
  // Coloca aquí el código que deseas ejecutar cuando se haga clic en el botón
});

Con este código, cuando se haga clic en el botón, la página no se recargará automáticamente. En su lugar, el código dentro de la función de manejo de eventos se ejecutará.