JS导出encrypt/decrypt到HTML时提示未定义的问题排查

核心问题原因 #

你在vigenere.js中使用了ES模块的export语法，但HTML里是以普通脚本方式加载该文件的。这种情况下，模块内部的encrypt和decrypt函数不会暴露到全局作用域，导致HTML中的encryptText函数调用时提示函数未定义。

排查步骤 #

• 检查JS文件导出方式：如果使用export，必须以模块方式加载脚本
• 查看浏览器控制台：打开F12控制台，确认是否有模块加载相关的报错
• 验证函数作用域：在HTML的脚本中打印window.encrypt，若返回undefined，说明函数未挂载到全局

修复方案（二选一） #

方案1：移除ES模块导出，让函数全局暴露 #

修改vigenere.js，删除最后一行的export { encrypt, decrypt };，函数会自动挂载到全局对象（window）上，HTML代码可直接调用。

修改后的vigenere.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;
}

方案2：以ES模块方式加载脚本并手动导入函数 #

1. 修改HTML中的外部脚本标签，添加type="module"：

<script type="module" src="vigenere.js"></script>

2. 将HTML内部的脚本也改为模块，并导入函数后挂载到全局（因为onclick属性只能访问全局函数）：

<script type="module">
    import { encrypt, decrypt } from './vigenere.js';

    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 = "";
      } 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 = "";
      } catch (error) {
        document.getElementById("errorMessage").textContent = error.message;
      }
    }

    window.encryptText = encryptText;
    window.decryptText = decryptText;
</script>

注意：该方案需要在本地服务器环境下运行（如VS Code的Live Server插件），直接打开HTML文件会触发跨域错误。

验证步骤 #

• 修复后，打开浏览器控制台输入encrypt，若能看到函数定义则说明加载成功
• 测试加密解密功能，确认合法输入能生成结果，非法输入能显示错误提示

内容的提问来源于stack exchange，提问作者Leila Jones