Caesar cipher website in HTML and Javascript not producing output

Question

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:

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

The browser is already reporting errors to you in the developer console. — Pointy, Nov 12 '17 at 15:54

score 1 · Accepted Answer · answered Nov 12 '17 at 16:03

1

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/

answered Nov 12 '17 at 16:03

Naman Kheterpal

1,810
1
9
16

Thank you very much. However, it prints the same thing now, instead of the ciphertext. I know the cipher algorithm is correct, no need to fix that, but there is a problem with the value of `x`. Can you help me with that? – toyotasupra Nov 12 '17 at 16:11
you are not storing your result, and printing "x" only in output. May be this is what you are looking for : `https://jsfiddle.net/vqsnmamy/3/` – Naman Kheterpal Nov 12 '17 at 16:25
Ok. Your answer did help me a lot, and as I can not upvote, I will accept it. – toyotasupra Nov 12 '17 at 16:56

Caesar cipher website in HTML and Javascript not producing output

1 Answers1