Search code examples
javascripthtmlcryptographycaesar-cipher

Caesar cipher website in HTML and Javascript not producing output

I am making a website in HTML5 and Javascript which takes in some plaintext through textarea, applies a caesar cipher of 3, and sends the output to another textarea.

However, it does not produce any output. Here is my code:

    <!DOCTYPE html>
    <html>
    <body>
    <script language="JavaScript">
    var x = document.getElementById("myTextArea").value;

    function c_ciph(){
      for (var i = 0, len = x.length; i < len; i++) {
        if (x[i] == x[i].toUpperCase()){
          var a = x[i].charCodeAt(0);
          var e = ((a - 65 + 3) % 26) + 97;
          var c = String.fromCharCode(e);
        }
        else if (x[i] == x[i].toLowerCase()){
          var a = x[i].charCodeAt(0);
          var e = ((a - 97 + 3) % 26) + 97;
          var c = String.fromCharCode(e);
        }
      }
      document.getElementById('result').value = x;
    }


    </script>
    <div>
      <h1>Cipher and Leetspeak Converter</h1>
      <p>Welcome to the cipher and leetspeak converter.</p>
    </div>

    <div>
      <textarea id = "myTextArea" rows = "6" cols = "80">
      </textarea>
      <p>Convert to:</p>
    </div>

    <div>
    <form>
      <input type="radio" name="codingStyle" value="caesar_cipher" onclick="c_ciph();"> Caesar Cipher <br>
      <input type="radio" name="codingStyle" value="vigenere_cipher"> Vigenere Cipher<br>
      <input type="radio" name="codingStyle" value="leetspeak"> Leetspeak
    </form>
    </div>

    <div>
      <button type="button">Convert</button>
    </div>

    <div>
      <textarea id = "result" rows = "6" cols = "80">
      </textarea>
    </div>

    </body>
    </html>

This is the site:

enter image description here However, nothing shows up in the second text box when "Caesar Cipher" is clicked.

I am new to Javascript and HTML, so please point out as many errors as you can.

EDIT 1: The output does appear in the 2nd text area now. However, I am having trouble changing the value of x to the ciphertext. It prints out the same value. See image here:enter image description here

Instead of geek in the second textarea, there should be "iggm". Please help.

Solution

  • You need to move the 

     var x = document.getElementById("myTextArea").value;

    inside the function, So that each time function is called x is assigned new value.

    function c_ciph(){
        var x = document.getElementById("myTextArea").value;

  for (var i = 0, len = x.length; i < len; i++) {
    if (x[i] == x[i].toUpperCase()){
      var a = x[i].charCodeAt(0);
      var e = ((a - 65 + 3) % 26) + 97;
      var c = String.fromCharCode(e);
    }
    else if (x[i] == x[i].toLowerCase()){
      var a = x[i].charCodeAt(0);
      var e = ((a - 97 + 3) % 26) + 97;
      var c = String.fromCharCode(e);
    }
  }
  document.getElementById('result').value = x;
}

    Working example here https://jsfiddle.net/vqsnmamy/2/