JS不会链接到HTML按钮

时间:2019-03-07 15:08:47

标签: javascript html rot13

我有一个Rot13 JS函数,我试图链接到按钮。预期的输出是,如果我输入“ ABC”并按“加密”按钮,则加密的文本将变为“ NOP”。

该函数当前未链接到HTML中的按钮,当我按下加密按钮时,没有响应。我在HTML中添加了一个脚本标签。

编辑:加密器链接到该按钮,但是将“ 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。

1 个答案:

答案 0 :(得分:2)

代码很少出现问题:

  • output.join('') = document.getElementById("box2")将引发错误。您应该将.value设置为output.join('')=的左侧应为variableoutput.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>