title: Why doesn't JQuery work with CryptoJS?
body: <p>I have an encoding program which allows the user to enter some text and a password to send messages securely.</p>
  
  <p>However, when I try to run the following code, JQuery does not work properly:</p>
  
  <pre><code>text = CryptoJS.AES.encrypt(text, pass);
  $("#encodedText").html(text);
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"&gt;&lt;/script&gt;
    &lt;link rel="icon" sizes="192x192" href="http://www.tdat.byethost10.com/web_images/favicon.ico"&gt;
    &lt;link rel="apple-touch-startup-image" href="http://www.tdat.byethost10.com/web_images/favicon.ico"&gt;
    &lt;link rel="shortcut icon" href="" type="image/icon"&gt;
    &lt;link rel="icon" href="http://www.tdat.byethost10.com/web_images/favicon.ico" type="image/icon"&gt;
    &lt;meta name="viewport" content="width = device-width"&gt;
    &lt;meta name="mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;meta name="mobile-web-app-capable" content="yes"&gt;
    &lt;title&gt;ENCRYPT&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  
  &lt;style&gt;
    #first {
      font-family: "courier";
      text-align: center;
      color: #00FF04;
    }
    #second {
      color: white;
    }
    #myDIV {
      border: 1px solid green;
      margin-bottom: 10px;
    }
    button {
      border-radius: 50%;
      background-color: #00FF04;
      border-color: #00FF04;
      color: white;
      font-size: 40px;
      transition-duration: 0.4s;
      width: 25%;
      height: 80px;
    }
    button:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
      background-color: red;
      border-color: red;
    }
    .searchTxt {
      color: #00FF04;
      font-family: "courier";
      border: solid #00FF04;
      border-radius: 5px;
      background-color: black;
    }
    .heading {
      font-size: 80px
    }
  &lt;/style&gt;
  
  &lt;body bgcolor="black" id="first"&gt;
  
    &lt;p class="heading"&gt;ENCODE TEXT&lt;/p&gt;
    &lt;p&gt;
      Your text:
    &lt;/p&gt;
    &lt;br&gt;
    &lt;input class="searchTxt" size="50" id="textToEncode"&gt;
    &lt;br&gt;
    &lt;p&gt;Your password:&lt;/p&gt;
    &lt;br&gt;
    &lt;input class="searchTxt" size="50" id="textToRedact"&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;button id="encodeButton"&gt;Encode!&lt;/button&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;p id="encodedText"&gt;&lt;/p&gt;
  
  
    &lt;p class="heading"&gt;DECODE TEXT&lt;/p&gt;
    &lt;p&gt;Text:&lt;/p&gt;
    &lt;br&gt;
    &lt;input class="searchTxt" size="50" id="textToDecode"&gt;
    &lt;br&gt;
    &lt;p&gt;Key:&lt;/p&gt;
    &lt;br&gt;
    &lt;input class="searchTxt" size="50" id="keyForDecode"&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;button id="decodeButton"&gt;Decode!&lt;/button&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;p id="decodedText"&gt;&lt;/p&gt;
  
  
    &lt;script&gt;
      var text = "";
      var word = "";
      var redacted = "";
      var encodedInfo = [];
      var key = "";
      var pass = "";
  
      $("#encodeButton").on("click", function() {
        $("#key").html("");
        $("#encodedText").html("");
        encodedInfo = [];
        redacted = "";
        text = $("#textToEncode").val();
        pass = $("#textToRedact").val();
        text = CryptoJS.AES.encrypt(text, pass);
        alert("Your encrypted message is as such: " + text);
        $("#encodedText").html(text);
      });
  
  
      $("#decodeButton").on("click", function() {
        $("#decodedText").html("");
        redacted = "";
        word = "REDACTED";
        text = $("#textToDecode").val();
        key = $("#keyForDecode").val();
        decrypted = CryptoJS.AES.decrypt(text, key);
        decrypted = decrypted.toString(CryptoJS.enc.Utf8);
        if (decrypted === "") {
          alert("FAIL!!! Wrong password.");
        } else {
          $("#decodedText").html(decrypted);
          alert("The message is: " + decrypted);
        }
  
      });
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see in the snippet it correctly alerts you the encoded message, but it does not change the value of <code>#encodedText</code>. Why might this be so?</p>
  
  <p>LIVE DEMO: <a href="http://redacted.ga/advance.html" rel="nofollow">redacted.ga/advance.html</a></p>