[Duda] challenge encript | Lógica de programación: Conceptos primordiales

Hola, al momento de dar click en el botón encriptar, lo que escribí en el textarea desaparece y se pierde, no puedo verlo ni siquiera con el console.log(). Yo creo que el problema está cuando llamo a la función encriptación() en el .addEventListener!

código JavaScript

let texto = document.querySelector("#mensaje");                      /*input*/
let codigo= document.querySelector("#codigo");                       /*output*/
let botonEncriptar= document.querySelector(".encriptar");
let botonDesencriptar = document.querySelector(".desencriptar");

botonEncriptar.addEventListener("click", function (){
    const mensajeOriginal = texto.value;
    const mensajeEncriptado = encriptacion(mensajeOriginal);
    console.log(mensajeEncriptado)
    codigo.innerHTML = mensajeEncriptado;

});   

function encriptacion(texto) {
    return texto.replace(/e/g,"enter")
    .replace(/i/g,"imes")
    .replace(/a/g,"ai")
    .replace(/o/g,"ober")
    .replace(/u/g,"ufat");
}

código HTML

               <textarea cols="40" rows="5" id="mensaje"required class="place"placeholder="ingrese el texto aquí"></textarea>
                <img class="rectangulo" src="imagenes/Rectangle 1.png">
                <div id="codigo">
                    <img class="muneco" src="Imagenes/Muñeco.png" alt="muñeco">
                    <h1 ><p>Ningún mensaje fue encontrado</p></h1>
                    <p class="text">Ingrese el texto que desee encriptar o desencriptar</p>
                </div>
            </li>
        </ul>  
    </main>
    <footer>
        <div>                       
            <nav>
                <ul>
                    <form class="btn">
                        <p>&#9787 Sólo letras minúsculas y sin acentos</p>
                        <li class="encriptar"><button onclick="enc()">Encriptar!</button></li>
                        <li class="desencriptar"><button onclick="desencriptacion()">Desencriptar!</button></li>
                    </form>
                </ul>
            </nav>
        </div>
    </footer>
    <script src="challengeEncriptador.js"></script>
</body>

let texto = document.querySelector("#mensaje"); /*input*/ let codigo= document.querySelector("#codigo"); /*output*/ let botonEncriptar= document.querySelector(".encriptar"); let botonDesencriptar = document.querySelector(".desencriptar"); botonEncriptar.addEventListener("click", function (event){ // Aqui recibimos el event event.preventDefault(); // Aquí agregamos el event.preventDefault para evitar que esta acción recargue la página const mensajeOriginal = texto.value; const mensajeEncriptado = encriptacion(mensajeOriginal); codigo.innerHTML = mensajeEncriptado; }); function encriptacion(texto) { const textoEncriptado = texto.replace(/e/g,"enter") // Aquí sugiero que primero guarde el resultado de la encriptación .replace(/i/g,"imes") .replace(/a/g,"ai") .replace(/o/g,"ober") .replace(/u/g,"ufat"); return textoEncriptado; // Y luego retorne el resultado que está guardado en esta variable }