JS 不会 link 到 HTML 按钮

JS won't link to HTML button

我有一个 Rot13 JS 函数,我正试图 link 到一个按钮。预期的输出是,如果我输入 'ABC' 并按下加密按钮,加密文本将变为 'NOP'.

该功能目前 link 取决于 HTML 中的按钮,当我按下加密按钮时没有任何反应。我在 HTML.

中包含了一个脚本标签

编辑: 加密器被 link 编辑到按钮,但它加密 '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。

代码问题很少:

  • output.join('') = document.getElementById("box2") 会抛出错误。您应该将 .value 设置为 output.join('')= 的左侧应该是 variableoutput.join('') returns 是值,不能赋值给任何东西。
  • 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>