Estoy programando en js junto con html y css, estoy haciendo un encriptador de mensajes, mi codigo de js tiene una funcion que al recibir un texto de un texttarea cambie las vocales por otras letras, esta función se debe de ejecutar cuando se haga click en un boton llamado "encriptar", a la hora de hacer click, no funciona correctamente. `
<body>
<header>
<img src="logo.jpg" alt="logo-alura" class="logo-a">
</header>
<main>
<p class="requisito">⚠ Solo letras minúsculas y sin acentos</p>
<form>
<textarea cols="50" rows="22" id="mensaje" class="input-mensaje" required placeholder="Pon aquí tu mensaje" ></textarea>
<button id="encriptar" >Encriptar</button>
<button id="desencriptar">Desencriptar</button>
</form>
<div class="parent">
<img src="rectangulo.jpg" alt="rectangulo" class="recuadro">
<img src="muñeco.jpg" alt="muñeco" class="muñeco" id="lupa">
<p class="noencontrado" id="hola">No se ha encontrado ningún mensaje</p>
<div id="mensaje-encriptado">hola</div>
</div>
</main>
<body>
var encriptar = document.getElementById("encriptar");
var input = document.getElementById("mensaje");
function imprimir(frase){
document.write(frase);
}
function cambiaVocal(){
var letras = input.value;
var listaLetras = letras.split("");
var cantidadLetras = letras.length;
for(var contador = 0; contador < cantidadLetras; contador++)
if(listaLetras[contador] == "a"){
document.getElementById("mensaje-encriptado").innerHTML = "ai";
}
else if(listaLetras[contador] == "e"){
document.getElementById("mensaje-encriptado").innerHTML = "enter";
}
else if(listaLetras[contador] == "i"){
document.getElementById("mensaje-encriptado").innerHTML = "imes";
}
else if(listaLetras[contador] == "o"){
document.getElementById("mensaje-encriptado").innerHTML = "ober";
}
else if(listaLetras[contador] == "u"){
document.getElementById("mensaje-encriptado").innerHTML = "ufat";
}
else if(listaLetras[contador] == " "){
document.getElementById("mensaje-encriptado").innerHTML = " ";
}
}
encriptar.onclick = cambiaVocal
`
Utilice un div con adentro un "hola" para ver que ocurría, me fije que solo muestra si la letra es una "a" la muestra como "ai" por unos milisengundos y vuelve a presentar el mensaje "hola". Soy nuevo aprendiendo a programar por si no saben como resolverlo o quieren darme recomendaciones acerca de como mejorar el código con términos básicos, estoy más que dispuesto a recibir críticas constructivas,