为什么这个“解密”函数在这个 JavaScript 文件中不起作用？

问：

我正在使用 HTML、CSS 和 Javascript 创建一个网站。我的主页由一个标题和 4 个指向其他页面（主页、关于、投资组合、联系人）的导航链接组成。我想达到这样的效果：当用户加载主页时，所有文本都在从一个密码切换到另一个密码，然后逐个字符“解密”为正确的原始文本。例如，带有原始纯文本“我的网站”的标题将显示 35 个相同长度的不同密码，然后在显示最后一个密码后逐个字符解密：bdhyfiendk -> Mhdvrufgne -> Myhdbnfehs -> My hsnrifm -> My Whsnfje -> My Wehsbeq ...你明白了。在我的 HTML 代码中，我分隔了每个文本，因此标题为 class = “.header-text”，然后 4 个导航元素遵循语法 class =“.nav-”。

到目前为止，我编写的代码正确地执行了密码位（因此它显示了所有不同的密文），但随后卡在最后一个密码上并且没有继续解密。下面是 js 文件：

// Function to generate random foreign symbols
function generateRandomSymbols(length) {
// Define a string of symbols to choose from
const symbols = "!@#$%^&*()_+-=[]{}|;':\",.<>/?abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
let result = '';

// Generate a random string of symbols with the specified length
for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * symbols.length);
    result += symbols.charAt(randomIndex);
}

return result;
}

// Function to decrypt the text
function decryptHeader(textElement, originalText, decryptionSpeed) {
let currentIndex = 0;

// Function to update the text character by character
function updateText() {
    if (currentIndex < originalText.length) {
        const charIndex = currentIndex;
        const char = originalText.charAt(charIndex);
        
        // Create a new text string with one character replaced
        const newText = textElement.textContent.substring(0, charIndex) + char + textElement.textContent.substring(charIndex + 1);
        
        // Update the text with the new string
        textElement.textContent = newText;
        currentIndex++;
        
        // Schedule the next character update with a delay
        setTimeout(updateText, decryptionSpeed); // Adjust the decryption speed
    }
}

// Start updating the text
updateText();
}

// Call the decryptText function for each element when the page loads
document.addEventListener('DOMContentLoaded', function () {
// Find the elements in the HTML using their classes
const headerElement = document.querySelector('.header-text');
const homeElement = document.querySelector('.nav-home');
const aboutElement = document.querySelector('.nav-about');
const portfolioElement = document.querySelector('.nav-portfolio');
const contactElement = document.querySelector('.nav-contact');

// Store the original texts
const originalHeaderText = headerElement.textContent;
const originalHomeText = homeElement.textContent;
const originalAboutText = aboutElement.textContent;
const originalPortfolioText = portfolioElement.textContent;
const originalContactText = contactElement.textContent;

// Set the decryption speed (time between character changes)
const decryptionSpeed = 100; // Adjust the decryption speed in milliseconds (e.g., 100 for 100ms)

// Generate an array of cipher texts with the same length as each original text
const cipherHeaderTexts = Array.from({ length: 35 }, () => generateRandomSymbols(originalHeaderText.length));
const cipherHomeTexts = Array.from({ length: 35 }, () => generateRandomSymbols(originalHomeText.length));
const cipherAboutTexts = Array.from({ length: 35 }, () => generateRandomSymbols(originalAboutText.length));
const cipherPortfolioTexts = Array.from({ length: 35 }, () => generateRandomSymbols(originalPortfolioText.length));
const cipherContactTexts = Array.from({ length: 35 }, () => generateRandomSymbols(originalContactText.length));

// Function to update cipher text and start decryption for each element
function updateCipherText(element, cipherTexts) {
    let currentIndex = 0;

    function updateCipher(index) {
        if (index < cipherTexts.length) {
            element.textContent = cipherTexts[index];

            setTimeout(() => {
                updateCipher(index + 1);
            }, 50); // Adjust the cipher text change speed
        } else {
            // After displaying all cipher texts, start decrypting
            decryptText(element, originalText, decryptionSpeed);
        }
    }

    updateCipher(currentIndex);
}

// Start updating cipher text and decryption for each element
updateCipherText(headerElement, cipherHeaderTexts);
updateCipherText(homeElement, cipherHomeTexts);
updateCipherText(aboutElement, cipherAboutTexts);
updateCipherText(portfolioElement, cipherPortfolioTexts);
updateCipherText(contactElement, cipherContactTexts);
});