当 textarea 替换为输入类型 = 文本时,编写和解码编码消息的程序会出现故障

Program to write and decode coded messages glitches out when textarea is substituted for input type = text

我有一个程序使用加密序列和消息生成和解码秘密消息,将字母转换为数字,在随机生成的加密序列中添加 numbers/letters 及其相应的数字,并且该程序通过减法对其进行解码,但我替换为考虑更长的消息,它出现了故障。你自己看。我已将问题隔离到 textArea。这是我的代码。

<!DOCTYPE html>
<html>
  <h1>DECODE</h1>
  <p>Message here</p>
  <textarea id="coded message" rows="5" cols="50"> </textarea>
  <p>Encryption sequence here</p>
  <textarea id="encryption sequence" rows="5" cols="50"> </textarea>
  <button onclick="toArray()">DECODE</button>
  <p id="output"></p>
</html>
<script>
  var seq = document.getElementById("encryption sequence").value;
  var mes = document.getElementById("coded message").value;
  var convertedSeqArray = [];
  var messageDoneString = "";
  var convertedMesArray = [];
  var subArray = [];
  var mesArray = [];
  var x = 0;
  var convertedMesArray = [];
  var convertedSeqArray = [];
  var messageDone = [];
  seqArray = [];
  var num = "";
  function toArray() {
    mes = document.getElementById("coded message").value;
    mesArray = mes.split(" ");
    seq = document.getElementById("encryption sequence").value;
    seqArray = seq.split(",");
    convertedSeqArray = seqArray.map(Number);
    convertedMesArray = mesArray.map(Number);
    for (var l = 0; l < mesArray.length; l++) {
      subArray.push(convertedMesArray[l] - convertedSeqArray[l]);

      num = String.fromCharCode(96 + subArray[l]);

      messageDone.push(num);
    }
    for (var q = 0; q < messageDone.length; q++) {
      messageDoneString = messageDoneString + messageDone[q];
    }
    alert(messageDoneString);
  }
</script>
<html>
  <h1>ENCODE</h1>
  <p>Encryption sequence:</p>
  <p id="sequence"></p>
  <p>Coded message</p>
  <p id="coded"></p>
  <textarea id="h" rows = '5' cols = '50'> </textarea>

  <button onclick="getList()">ENCODE</button>
  <script>
    var seq = document.getElementById("sequence");
    var cod = document.getElementById("coded");
    var array = [];
    var output = document.getElementById("h").value.split("");
    var sequence = [];
    var sequenceCounter = 0;
    function generateSequence(length) {
      sequence = [];
      for (var c = 0; c < length; c++) {
        sequence.push(Math.floor(Math.random() * 10));
      }
    }
    var message = "";
    function getList() {
      output = document.getElementById("h").value.split("");
      array = output;
      var length = array.length;
      generateSequence(array.length);
      message = "";
      for (var i = 0; i < array.length; i++) {
        var addNew = array[i].charCodeAt(0) - 96;

        addNew = addNew + sequence[i];
        message = message + " " + addNew;
      }

      cod.innerText = message;
      seq.innerText = sequence;
    }
  </script>
</html>

问题是开头的 spaces。如果开头有任何 space,您将得到那些奇怪的字母。我尝试用 trim() 修复它,但没有用。出于某种原因,当您复制并粘贴“编码消息”时,它会在开头粘贴 space。您可以使用 if 语句删除 space.

    mes = document.getElementById("coded message").value.trim();
    mesArray = mes.split(" ");
    seq = document.getElementById("encryption sequence").value.trim();
    seqArray = seq.split(",");
    if (mes[0] === " ")
      mes.shift();
    if (seq[0] === " ")
      seq.shift();
    convertedSeqArray = seqArray.map(Number);
    convertedMesArray = mesArray.map(Number);
    for (var l = 0; l < mesArray.length; l++) {
      subArray.push(convertedMesArray[l] - convertedSeqArray[l]);

      num = String.fromCharCode(96 + subArray[l]);

      messageDone.push(num);
    }
    for (var q = 0; q < messageDone.length; q++) {
      messageDoneString = messageDoneString + messageDone[q];
    }

我确实使用了 trim,因为它确实删除了足够多的 spaces,直到剩下一个,并且还有任何额外的 spaces(这不应该发生)。由于两个字符串都变成了数组,我们可以在变量上使用数组函数。