HTML 和 Javascript 中的凯撒密码网站未生成输出

Question

我正在 HTML5 和 Javascript 中创建一个网站，它通过 textarea 接收一些明文，应用 3 的凯撒密码，并将输出发送到另一个 textarea.

但是，它不产生任何输出。这是我的代码：

    <!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>

这是网站：

enter image description here 但是，当 "Caesar Cipher" 时，第二个文本框中没有显示任何内容被点击。

我是Javascript和HTML的新手，所以请尽可能多地指出错误。

编辑 1：输出现在确实出现在第二个 text area 中。但是，我无法将 x 的值更改为 ciphertext。它打印出相同的值。在这里查看图片：

第二个 textarea 中的 geek 应该是 "iggm" 而不是。请帮忙。

Answer 1

您需要移动

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

在函数内部，这样每次调用函数时x都会被赋予新的值。

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;
}

工作示例在这里 https://jsfiddle.net/vqsnmamy/2/

HTML 和 Javascript 中的凯撒密码网站未生成输出

Caesar cipher website in HTML and Javascript not producing output

html

javascript

cryptography

caesar-cipher