0

tengo un desafío como principiante en programación y es encriptar y desencriptar a través de Js con parte de código HTML y no se en que le estoy errando.

alguien me podría iluminar?

muchas gracias desde ya

script

HTML

index.html

    <!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="titulo">código secreto</h1>

  <main class="main">
    <section class="form box">
      <form action="">
        <label for="input-texto">Solo letras minúsculas, sin acento</label>
        <input class="text-input" type="text" name="input-texto" id="input-texto" placeholder="Ingrese el texto aqui">
        <input class="btn" type="submit" value="encriptar!" id="btn-encriptar">
        <input class="btn" type="submit" value="desencriptar!" id="btn-desencriptar">
      </form>
    </section>
  
    <section class="msg box">
      <h2 id="">Mensaje encriptada:</h2>
      <input class="text-input-salida" type="text" id="msg">
      <input class="btn" type="submit" value="copiar" id="btn-copy">
    </section>
  </main>

  <script src="script.js"></script>
  <script src="Copiar-pegar.js"></script>
</body>
</html>

script.js

function encriptar (){
        var texto = document.querySelector("#input-texto").value;
        var textoCifrado = texto.replace(/e/gi, "enter").replace(/i/gi, "imes").replace(/a/gi, "ai").replace(/o/gi, "ober").replace(/u/gi, "ufat");
        document.querySelector(".text-input-salida").value = textoCifrado;
        document.querySelector("#input-texto").value;

}

var boton1 = document.querySelector("#btn-encriptar");
boton1.onclick = encriptar;

function desencriptar (){
        var texto = document.querySelector("#input-texto").value;
        var textoCifrado = texto.replace(/enter/gi, "e").replace(/imes/gi, "i").replace(/ai/gi, "a").replace(/ober/gi, "o").replace(/ufat/gi, "u");
        document.querySelector(".text-input-salida").value = textoCifrado;
        document.querySelector("#input-texto").value;

}

var boton2 = document.querySelector("#btn-desencriptar");
boton2.onclick = desencriptar;
18
  • buenas, en si que deseas realizar Commented el 19 ene. 2022 a las 20:19
  • la idea es que el usuario ponga un mensaje, y clickeando el boton encriptar reempaza las vocales por otras palabras. "e" es convertido para "enter" "i" es convertido para "imes" "a" es convertido para "ai" "o" es convertido para "ober" "u" es convertido para "ufat" Commented el 19 ene. 2022 a las 20:32
  • Por favor, coloca tu código escrito para poder ayudarte mejor. Commented el 19 ene. 2022 a las 20:35
  • 1
    Cuales es tu error, he probado tu codigo aca jsfiddle.net/gsa2ycb4 y solo cambie los submit por button para que se ejecute y "funciona" bien, dinos exactamente que es lo que necesitas Commented el 19 ene. 2022 a las 20:54
  • 1
    @ricardo-dlc no pense en una respuesta por lo sencillo, pero ya la coloco, gracias bro Commented el 19 ene. 2022 a las 21:28

1 respuesta 1

0

Tu error es porque tienes Submit en vez de Button y el formulario se envia y no deja que el JS pueda funcionar.

Tu código funcional solo cambiando los submit

function encriptar (){
    var texto = document.querySelector("#input-texto").value;
    var textoCifrado = texto.replace(/e/gi, "enter").replace(/i/gi, "imes").replace(/a/gi, "ai").replace(/o/gi, "ober").replace(/u/gi, "ufat");
    document.querySelector(".text-input-salida").value = textoCifrado;
    document.querySelector("#input-texto").value;
    }


    
var boton1 = document.querySelector("#btn-encriptar"); boton1.onclick = encriptar;

function desencriptar (){ var texto = document.querySelector("#input-texto").value; var textoCifrado = texto.replace(/enter/gi, "e").replace(/imes/gi, "i").replace(/ai/gi, "a").replace(/ober/gi, "o").replace(/ufat/gi, "u"); document.querySelector(".text-input-salida").value = textoCifrado; document.querySelector("#input-texto").value;

}

var boton2 = document.querySelector("#btn-desencriptar"); boton2.onclick = desencriptar;
   <!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="titulo">código secreto</h1>

  <main class="main">
    <section class="form box">
      <form action="">
        <label for="input-texto">Solo letras minúsculas, sin acento</label>
        <input class="text-input" type="text" name="input-texto" id="input-texto" placeholder="Ingrese el texto aqui">
        <input class="btn" type="button" value="encriptar!" id="btn-encriptar">
        <input class="btn" type="button" value="desencriptar!" id="btn-desencriptar">
      </form>
    </section>
  
    <section class="msg box">
      <h2 id="">Mensaje encriptada:</h2>
      <input class="text-input-salida" type="text" id="msg">
      <input class="btn" type="button" value="copiar" id="btn-copy">
    </section>
  </main>

  <script src="script.js"></script>
  <script src="Copiar-pegar.js"></script>
</body>
</html>

Ya solo te queda mejorar tu lógica de encriptado para darle más seguridad.

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