Question

这个想法是制造一个OTP（一个时间片）编码器，然后再制造一个解码器。这是实现-两个输入框。一个包含密钥，一个包含消息。还有一个显示“ OTPencrypt”的框。如果单击OTP按钮，它将执行称为初始化的功能，并将结果显示在输出框中。我不知道如何使OTPencrypt按钮和输出框“连接”。我的HTML代码：

<!DOCTYPE html>

<html>
<head>
</head>
<body>
  <input type="text" name="Input" value="Sisend">
</body>
<script type = "text/javascript">
function initialaize() {
  var message = document.getElementById("Input").value;
  var key = document.getElementById("Key").value;
  var end_message = "";
  var chipertext = "";
  var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
  var alphamap = new Map();
    for (i = 0; i < alphabet.lenght, i++) {
      alphamap.set(alphabet[i], i);
    }
    for (a = 0; i < key.lenght; i++) {
      var value_original = alphamap.get(message[a]) ;
      var value_key = alphamap.get(key[a]);
      var value = getByValue(alphamap, ((value_original + value_key) % 26));
      chipertext += value;
      }
      function getByValue(map, searchValue) {
        for (let [key, value] of map.entries()) {
          if (value === searchValue) {
            return key;
          }
        }
      }
      return chipertext;
    }
</script>
<body>
  <input type="text" name="Key" value="Key(kui vaja)">
</body>

<body>
  <button id="OTPencrypt">OTPencrypt</button>
</body>
<body>
  <input type="text" name="result" value=result readonly="true">
</body>
</html>

如果要按下OTPencrypt，我希望结果显示初始化结果。我该怎么办？

Answer 1

您必须在#OTPencrypt按钮上添加onClick事件侦听器，才能将文本框的值设置为函数的输出

将以下内容添加到JS代码中：

document.getElementById("OTPencrypt").addEventListener("click",()=>{
    document.getElementsByName("result")[0].value=initialaize()
})

Answer 2

您需要在按钮上添加一个事件侦听器，并让其在单击后运行initialize，这就是您的代码的样子。

运行摘要并查看结果

<!DOCTYPE html>

<html>

<head>
</head>

<body>
  <input id="Input" type="text" name="Input" value="sisend">
  <input id="Key" type="text" name="Key" value="kuiva">
  <button id="OTPencrypt">OTPencrypt</button>
  <input type="text" id="result" name="result" placeholder=result readonly="true">

  <script type="text/javascript">
    document.getElementById('OTPencrypt').addEventListener('click', () => {
      document.getElementById('result').value = initialaize();
    });


    function initialaize() {
      var message = document.getElementById("Input").value;
      var key = document.getElementById("Key").value;
      var end_message = "";
      var chipertext = "";
      var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
      var alphamap = new Map();
      for (var i = 0; i < alphabet.length; i++) {
        alphamap.set(alphabet[i], i);
      }
      for (var a = 0; a < key.length; a++) {
        var value_original = alphamap.get(message[a]);
        var value_key = alphamap.get(key[a]);
        var value = getByValue(alphamap, ((value_original + value_key) % 26));
        chipertext += value;
      }
      return chipertext;
    }

    function getByValue(map, searchValue) {
      for (let [key, value] of map.entries()) {
        if (value === searchValue) {
          return key;
        }
      }
    }
  </script>
</body>

</html>

请注意，您需要调整函数中的某些逻辑以涵盖所有输入可能性。

希望有帮助。

HTML和Javascript-两个输入框，一个按钮和一个输出框

2 个答案: