Uncaught TypeError: can't access property "words", key is undefined

I am having problems with two functions to encrypt and decrypt text in JavaScript.

I am currently using CryptoJS

I need to understand how the encryptation works to use it in a bigger project

var texto = document.getElementById("texto");

var llave = "prueba";

function encriptar(texto, llave) {    

    var textoEncriptado = String(CryptoJS.AES.encrypt(texto,llave));

    document.getElementById("textoEncriptado").innerHTML = textoEncriptado;    
    
    return textoEncriptado;
}

function desencriptar(textoEncriptado, llave) {
    var textoDesencriptado = String(CryptoJS.AES.decrypt(textoEncriptado, llave));
    document.getElementById("revelado").innerHTML = textoDesencriptado;
    console.log("El texto desencriptado es "+textoDesencriptado);
    return textoDesencriptado;
}

<!DOCTYPE html>
<header>
<script src="encriptacion.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
</header>
<head>Encriptacion</head>

<meta charset="utf-8">


</head>


<body>
    <h1>Prueba de Encriptacion</h1>


<form>
<input type="text" id="texto">
<p id="textoEncriptado"></p>
<input type="button" value="Encriptacion" onclick="encriptar()"></input>

<br>

<p>Texto desencriptado</p>
<input type="text" id="textoDesencriptado"></input>
<input type="button" value="Desencriptacion" onclick="desencriptar()"></input>
<p id="revelado"></p>
</form>

</body>

</html>

I would really appreciate it your help.

Solution

You made a few errors in your code:

Like @Barmar said

encryptar() and desencriptar() are both defined to take 2 parameters

so I set default values for these two functions equal to the values of the text fields.

var default_llave = "prueba";

function encriptar(
  texto = document.getElementById("texto").value,
  llave = default_llave
) {
...
}

function desencriptar(
  textoEncriptado = document.getElementById("textoDesencriptado").value,
  llave = default_llave
) {
...
}

So when you don't pass a value, these are the defaults.

I removed the conversion to and from the CryptoJS objects using the String function. CryptoJS objects have their own built in .toString method which allows you to specify encoding.
I also cleaned up some duplicate tags in the html file.

Full code:

var texto = document.getElementById("texto");

var default_llave = "prueba";

function encriptar(
  texto = document.getElementById("texto").value,
  llave = default_llave
) {
  var textoEncriptado = CryptoJS.AES.encrypt(texto, llave).toString()
  console.log(textoEncriptado);

  document.getElementById("textoEncriptado").innerHTML = textoEncriptado;

  return textoEncriptado;
}

function desencriptar(
  textoEncriptado = document.getElementById("textoDesencriptado").value,
  llave = default_llave
) {
  var textoDesencriptado = 
    CryptoJS.AES.decrypt(textoEncriptado, llave)
  .toString(CryptoJS.enc.Utf8);
  document.getElementById("revelado").innerHTML = textoDesencriptado;
  console.log("El texto desencriptado es " + textoDesencriptado);
  return textoDesencriptado;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="encriptacion.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
    <header>Encriptacion</header>

    <meta charset="utf-8" />
  </head>

  <body>
    <h1>Prueba de Encriptacion</h1>

    <form>
      <input type="text" id="texto" />
      <p id="textoEncriptado"></p>
      <input type="button" value="Encriptacion" onclick="encriptar()" />

      <br />

      <p>Texto desencriptado</p>
      <input type="text" id="textoDesencriptado" />
      <input type="button" value="Desencriptacion" onclick="desencriptar()" />
      <p id="revelado"></p>
    </form>
  </body>
</html>