[Projeto] Decodificador de textos- preciso de ajuda | Lógica de programação

Estou fazendo um challenge que é referente a um codificador de texto, nao consigo criar uma função que copie o resultado, seja ele, criptografado ou descriptografado ja tentei de todas as maneiras possiveis, mas parece que nada nunca da certo. as vezes começa a bater um desespero por nao conseguir fazer coisas que achava serem tão basicas, se alguem puder por favor me ajudar, ja nao sei mais oq fazer

segue meu html

<!DOCTYPE html>

<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title> The Matrix Criptografia</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link rel="icon" type="image/svg" href="imagens/logo.svg">
    </head>

    <body>
        <img class="logo" src="imagens/logo3x.svg">

        <main>
            <section>
                <textarea type='text' name="mensagem" id="mensagem" class="input-padrao" placeholder="Digite seu texto"></textarea>


                <div class= alerta-formulario>
                    <img src="imagens/exclamaçao.svg">
                    <label for="textarea">Apenas letras minúsculas e sem acento.</label>
                </div>
                <div class="botoes">
                    <button class="botao" id="crito-botao">Criptografar</button>
                    <button class="botao" id="decripto-botao" >Descriptografar</button>
                </div>
            </section>

            <section class="main-resultado">
                <img id="imagem-esquerda" src="imagens/cartoon.svg" alt="cartoon personagens matrix">
                <p class="texto-grande">Nenhuma mensagem encontrada</p>
                <p class="texto-pequeno">Digite um texto que você deseja criptografar ou descriptografar.</p>

                <div class="resultado">
                <div  class="texto-resultado"></div>

                    <button class="botao" id="copiar-botao" >Copiar</button>
                </div>
            </section>

        </main>

        <script src="script.js" defer></script>

        <footer>
            <p>Desenvolvido by.: Camilli Cerutti</p>
            <ul>
                <li>
                    <a href="https://github.com/CamilliCerutti">GitHub</a>
                </li>
                <li>    
                    <a href="https://www.linkedin.com/in/camilli-cerutti-dev/">Linkedin</a>
                </li>
            </ul>
        </footer>
    </body>
</html>

e o js


const txt = document.querySelector('input-padrao') 
const btn1 = document.querySelector('#crito-botao') 
const btn2 = document.querySelector('#decripto-botao')
const btn3 = document.querySelector('#copiar-botao')
const resultado = document.querySelector('.texto-resultado')


var modificado = ''
// Criptografando
btn1.addEventListener('click', function(e) {

    e.preventDefault();

    const mensagem = document.querySelector('#mensagem');

    const value = mensagem.value.toLowerCase();


    modificado = value.replaceAll("e","enter").replaceAll("i", "imes").replaceAll("a", "ai").replaceAll("o", "ober").replaceAll("u", "ufat");

    return resultado.innerHTML = modificado;
})


// Descriptografando

btn2.addEventListener('click', function(e) {

    e.preventDefault();

    const mensagem = document.querySelector('#mensagem');

    const value = mensagem.value.toLowerCase();


    modificado = value.replaceAll("enter","e").replaceAll("imes", "i").replaceAll("ai", "a").replaceAll("ober", "o").replaceAll("ufat", "u");

    return resultado.innerHTML = modificado;


})

function copiar() {
    navigator.clipboard.writeText(resultado.value);
    resultado.innerHTML = `${txt.value}`;
  }

Oi Camilli, tudo bem com você?

Peço desculpas pela demora em obter um retorno.

Percebi alguns pontos em relação ao seu código que podem ser ajustados para que tudo funcione corretamente:

Seleção do Elemento de Entrada: Parece que a seleção do elemento de entrada não está correta. Ao invés de usar document.querySelector('input-padrao'), é necessário adicionar um ponto antes do seletor para indicar que se trata de uma classe CSS. Portanto, você deve usar document.querySelector('.input-padrao').
Função de Cópia: Na função de cópia, é importante que você adicione um ouvinte de evento ao botão de cópia #copiar-botao. Isso permitirá que a função de cópia seja acionada quando o botão for clicado. Aqui está um exemplo de como adicionar o ouvinte de evento:

btn3.addEventListener('click', function(e) {
    e.preventDefault();

    navigator.clipboard.writeText(resultado.innerHTML);
});

Espero ter conseguido ajudar, qualquer dúvida estou á disposição.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!