JS不会链接到HTML按钮

Question

我具有我试图链接到按钮的rot13 js函数。预期的输出意味着，如果我输入" ABC"并按"加密"按钮，则加密文本将变为" nop'。

该函数当前没有链接到HTML中的按钮，当我按"加密"按钮时，没有响应。我在html中加入了脚本标签。

编辑： gentrypter链接到按钮，但是它加密为'abc'到'abc。

JavaScript：

function rot13() {
  var input = document.getElementById("box1").value;
  var output = [];
  for (var i = 0; i < input.length; i++) {
    var asciiNum = input[i].charCodeAt();
    if (asciiNum >= 65 && asciiNum <= 77) {
      output.push(String.fromCharCode(asciiNum + 13))
    } else if (asciiNum >= 78 && asciiNum <= 90) {
      output.push(String.fromCharCode(asciiNum - 13))
    } else {
      output.push(input[i])
    }
  }
  document.getElementById("box2").value = output.join('');
}

<div class="form">
        <input type="text" placeholder="plain text here..." name="plaintext" id="box1">
        <br>
        <button type="button" onclick="rot13()">Encrypt</button>
        <button type="button" onclick="rot13()">Decrypt</button>
        <br>
        <input type="text" placeholder="encrypted message here..." name="encryptedtext" id="box2">
      </div>

编辑：更正JS。

Answer 1

代码的问题很少：

• output.join('') = document.getElementById("box2")将丢弃错误。您应该将.value设置为output.join('')。=的左侧应为variable。 output.join('')返回是值，它不能分配给任何东西。
• output + input[i]不会做任何事情。您应该使用push()将值添加到数组中。

function rot13() {
  var input = document.getElementById("box1").value;
  var output = [];
  for (var i = 0; i < input.length; i++) {
    var asciiNum = input[i].charCodeAt();
    if (asciiNum >= 65 && asciiNum <= 77) {
      output.push(String.fromCharCode(asciiNum + 13))
    } else if (asciiNum >= 78 && asciiNum <= 90) {
      output.push(String.fromCharCode(asciiNum - 13))
    } else {
      output.push(input[i])
    }
  }
  document.getElementById("box2").value = output.join('');
}

<div class="form">
        <input type="text" placeholder="plain text here..." name="plaintext" id="box1">
        <br>
        <button type="button" onclick="rot13()">Encrypt</button>
        <button type="button" onclick="rot13()">Decrypt</button>
        <br>
        <input type="text" placeholder="encrypted message here..." name="encryptedtext" id="box2">
      </div>