0

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">&#9888 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,

1 respuesta 1

1

No hace falta que hagas un for ni tampoco esos ifs, podes usar el metodo replaceAll() (replaceAll MDN DOCS) que recibe dos parametros: el patron a reemplazar, y el patron nuevo a colocar. A diferencia de replace(), replaceAll() recorre todo el string y busca cada ocurrencia y reemplaza todas ellas:

let encriptar = document.getElementById("encriptar");
let input = document.getElementById("mensaje");     
let msjencriptado = document.getElementById("mensaje-encriptado");         
            
function imprimir(frase){
    document.write(frase);          
}

function cambiaVocal(){
    let letras = input.value;
    letras = letras.replaceAll("a","ai")
    letras = letras.replaceAll("e","enter")
    letras = letras.replaceAll("i","imes")
    letras = letras.replaceAll("o","ober")
    letras = letras.replaceAll("u","ufat")  
    msjencriptado.textContent = letras     
}
          
document.getElementsByTagName("form")[0].addEventListener("submit",(e) => {
  e.preventDefault(); // esto es para prevenir el comportamiento por defecto de los forms de recargar la pagina cuando se haga submit
})
            
encriptar.onclick = cambiaVocal
<p class="requisito">&#9888 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"></div>

</div>

2
  • 1
    De hecho, cuando colocas una "a" el codigo lee la "i" del intercambio de "a" a "ai", me explico con un ejemplo, si coloco una "a", el codigo colocará una "aimes", cuando solo debería colocar "ai", lo que hice fue cambiar el orden de las vocales, poniendo primero letras = letras.replaceAll("i","imes") y después las demás vocales, muchas gracias, me sirvió mucho tu ayuda. el 26 dic. 2022 a las 4:37
  • @CristianEnciso de nada Cristian, a veces me apuro en responder y es algo que debo mejorar, que tengas un buen dia! el 26 dic. 2022 a las 7:29

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.