从 JS 文件导出结节到 HTML 文件时未定义“加密/解密”

问题描述 投票:0回答:1

我正在创建一个用 JavaScript 模拟 Vigenere 密码算法的程序。我还创建了一个 HTML 页面,允许用户输入纯文本短语并对消息进行加密/解密。当我键入明文消息并输入键值时,收到错误消息“加密未定义”。我不相信我的 .js 文件正确导入了我的函数,或者如果该文件正在导入函数,那么我没有看到我的错误。我能否深入了解为什么我没有达到预期的输出?

function encrypt(plaintext, key) {
    if (!plaintext || !key || typeof plaintext !== 'string' || typeof key !== 'string' || key.match(/[^a-zA-Z]/)) {
        throw new Error('Invalid input: plaintext and key must be non-empty strings containing only alphabetic characters.');
    }

    var ciphertext = "";
    var keyIndex = 0;

    for (var i = 0; i < plaintext.length; i++) {
        var char = plaintext[i];

        if(/[a-zA-Z]/.test(char)) {
            var isUpperCase = char === char.toUpperCase();
            var plainCharCode = char.toUpperCase().charCodeAt(0) - 65;
            var keyCharCode = key[keyIndex % key.length].toUpperCase().charCodeAt(0) - 65;
            var encryptedCharCode = (plainCharCode + keyCharCode) % 26 + 65;

            ciphertext += isUpperCase ? String.fromCharCode(encryptedCharCode) : String.fromCharCode(encryptedCharCode).toLowerCase();
            keyIndex++;
        } else {
            ciphertext += char;
        }
    }

    return ciphertext;
}

function decrypt(ciphertext, key) {
    if (!ciphertext || !key || typeof ciphertext !== 'string' || typeof key !== 'string' || key.match(/[^a-zA-Z]/)) {
        throw new Error('Invalid input: ciphertext and key must be non-empty strings containing only alphabetic characters.');
    }

    var plaintext = "";
    var keyIndex = 0;

    for (var i = 0; i < ciphertext.length; i++) {
        var char = ciphertext[i];

        if (/[a-zA-Z]/.test(char)) {
            var isUpperCase = char === char.toUpperCase();
            var cipherCharCode = char.toUpperCase().charCodeAt(0) - 65;
            var keyCharCode = key[keyIndex % key.length].toUpperCase().charCodeAt(0) - 65;
            var decryptedCharCode = (cipherCharCode - keyCharCode + 26) % 26 + 65;

            plaintext += isUpperCase ? String.fromCharCode(decryptedCharCode) : String.fromCharCode(decryptedCharCode).toLowerCase();
            keyIndex++;
        } else {
            plaintext += char;
        }
    }

    return plaintext;
}

export { encrypt, decrypt };
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Assignment 4 - JavaScript</title>
  <script src="vigenere.js"></script>
  <style>
    .container {
      width: 50%;
      margin: auto;
    }
    .result {
      margin-top: 20px;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Vigenere Cipher</h2>
    <form id="cipherForm">
      <div>
        <label for="plaintext">Plaintext:</label><br>
        <textarea id="plaintext" name="plaintext" rows="4" cols="50"></textarea>
      </div>
      <div>
        <label for="key">Key:</label><br>
        <input type="text" id="key" name="key">
      </div>
      <div>
        <button type="button" onclick="encryptText()">Encrypt</button>
        <button type="button" onclick="decryptText()">Decrypt</button>
      </div>
      <div class="result">
        <label for="ciphertext">Ciphertext:</label><br>
        <textarea id="ciphertext" name="ciphertext" rows="4" cols="50" readonly></textarea>
      </div>
      <div class="error" id="errorMessage"></div>
    </form>
  </div>

  <script>
    function encryptText() {
      var plaintext = document.getElementById("plaintext").value;
      var key = document.getElementById("key").value;
      try {
        var ciphertext = encrypt(plaintext, key);
        document.getElementById("ciphertext").value = ciphertext;
        document.getElementById("errorMessage").textContent = ""; // Clear any previous error messages
      } catch (error) {
        document.getElementById("errorMessage").textContent = error.message;
      }
    }

    function decryptText() {
      var ciphertext = document.getElementById("ciphertext").value;
      var key = document.getElementById("key").value;
      try {
        var plaintext = decrypt(ciphertext, key);
        document.getElementById("plaintext").value = plaintext;
        document.getElementById("errorMessage").textContent = ""; // Clear any previous error messages
      } catch (error) {
        document.getElementById("errorMessage").textContent = error.message;
      }
    }
  </script>
</body>
</html>

javascript html encryption
1个回答
0
投票

我认为您正在导出函数

encrypt
decrypt
但没有将它们导入到 .html 文件的脚本标记中。

尝试-

<script src="sample.js" type="module">
import {encrypt} from "sample.js";
import {decrypt} from "sample.js";

..rest of your code
</script>
© www.soinside.com 2019 - 2024. All rights reserved.