I am unable to Decrypt my text but I am able to encrypt can someone please check my code

New coder

Encryption is working but decryption is not working at all and I am not able to spot my mistake

In javascript I have four functions:

First two encrypt and decrypt the text with or without key, Probably there is nothing wrong in first two functions

In third and fourth function I am taking input from html page and by storing them in variable I am encrypting and decrypting them

function encrypt(message = '', key = '') { //This function will take message and key for encryption
  var x = CryptoJS.AES.encrypt(message, key);
  return x.toString();
}

function decrypt(message = '', key = '') { //This function will take message and key for decryption
  var y = CryptoJS.AES.decrypt(message, key);
  var decryptedMessage = decry.toString(CryptoJS.enc.Utf8);
  return decryptedMessage;
}


function AesEncrypt() {
  const text = document.getElementById('inputText').value;
  const password = document.getElementById('inputPassword').value;
  var x = encrypt(text, password);
  document.getElementById("demo1").innerHTML = x;
}

function AesDecrypt() {
  const text1 = document.getElementById('inputText').value;
  const password2 = document.getElementById('inputPassword').value;
  var x1 = decrypt(text1, password2);
  document.getElementById("demo2").innerHTML = x1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<input type="text" id="inputText" placeholder="Enter Plain text or Text to Decrypt">
<input type="text" style="width: 100%;" id="inputText" placeholder="Enter Plain text or Text to Decrypt">
<input type="text" id="inputPassword" placeholder="Enter a Key">

<button type="button" onclick="AesEncrypt()">Encrypt</button>
<button type="button" onclick="AesDecrypt()">Decrypt</button>
<p id="demo1"> </p>
<p id="demo2"> </p>

Denis Turgenev

You made two mistakes

X decry.toString(CryptoJS.enc.Utf8);
O y.toString(CryptoJS.enc.Utf8);

X const text1 = document.getElementById('inputText').value;
O const text1 = document.getElementById('demo1').innerHTML;

You are using same id for two elements, and it's bad practice.

This is working code.

<input type="text" id="inputText" placeholder="Enter a Text">
<input type="text" id="inputPassword" placeholder="Enter a Key">

<button type="button" onclick="AesEncrypt()">Encrypt</button>
<button type="button" onclick="AesDecrypt()">Decrypt</button>
<p id="demo1"> </p>
<p id="demo2"> </p>

<script src="crypto-js.js"></script>
<script>
    function encrypt(message = '', key = '') { //This function will take message and key for encryption
        var x = CryptoJS.AES.encrypt(message, key);
        return x.toString();
    }

    function decrypt(message = '', key = '') { //This function will take message and key for decryption
        var y = CryptoJS.AES.decrypt(message, key);
        var decryptedMessage = y.toString(CryptoJS.enc.Utf8);
        return decryptedMessage;
    }


    function AesEncrypt() {
        const text = document.getElementById('inputText').value;
        const password = document.getElementById('inputPassword').value;
        var x = encrypt(text, password);
        document.getElementById("demo1").innerHTML = x;
    }

    function AesDecrypt() {
        const text1 = document.getElementById('demo1').innerHTML;
        const password2 = document.getElementById('inputPassword').value;
        var x1 = decrypt(text1, password2);
        document.getElementById("demo2").innerHTML = x1;
    }
</script>

Collected from the Internet

Please contact [email protected] to delete if infringement.