Função copiar não funciona direito | Front-end | Alura

var textInput = document.querySelector("#input-texto");
var outInput = document.querySelector("#output");


function criptografar() {

    var texto = textInput.value;

    var resultCripto = texto.replace(/A/gi, "NAPA").replace(/E/gi, "NEPE").replace(/I/gi, "NIPI").replace(/O/gi, "NOPO").replace(/U/gi, "NUPU");


    document.getElementById('output').innerHTML = '<textarea readonly id="input-texto">' + resultCripto +
        '</textarea>' + '<button class="btn-copiar" id="copiar" onclick="copiar()">Copiar</button>'/* + '<button class="btn-limparTela" id="limparTela" onclick="limparTela()">Resetar</button>'*/

}

function descriptografar() {

    var texto = textInput.value;

    var resultDescripto = texto.replace(/NAPA/gi, "a").replace(/NEPE/gi, "e").replace(/NIPI/gi, "i").replace(/NOPO/gi, "o").replace(/NUPU/gi, "u");


    document.getElementById('output').innerHTML = '<textarea readonly id="input-texto">' + resultDescripto +
        '</textarea>' + '<button class="btn-copiar" id="copiar" onclick="copiar()">Copiar</button>' /* + '<button class="btn-limparTela" id="limparTela" onclick="limparTela()">Resetar</button>'*/

}


function copiar() {
    var textoCop = document.getElementById('input-texto');
  
    textoCop.select();
    document.execCommand('copy');
    alert("Texto copiado.");
}

quando clico no botão para copiar ele copia o texto que eu escrevi e não o que apareceu na tela

<main class="mainContainer">
       <header class="cabecalho">
           <img src="/img/Vector.svg" alt="logo Cris">
           <h1>Mensagens Codificadas</h1>
       </header>
       <div class="container-input">
           <div class="input">
               <textarea id="input-texto" placeholder="Digite seu texto aqui..."></textarea>
               <p>ATENÇÃO: Apenas letras maiusculas e sem acento!</p>
           </div>


           <div id="output">
               <img src="/img/Vector.svg" alt="logo cris" height="330px" width="400px">
               <h2>Sua mensagem aparecerá aqui!</h2>
               <span>Digite um texto que deseja criptografar ou descriptografar.</span>
           </div>
       </div>


       <div class="buttons">
           <div class="container-bnt">
               <button onclick="criptografar()" class="btn-criptografar">Criptografar</button>
               <button onclick="descriptografar()" class="btn-descriptografar">Descriptografar</button>
           </div>

       </div>

Oi, Anderson, tudo bem?

O problema está ocorrendo porque você está usando o mesmo id ("input-texto") para dois elementos diferentes em seu HTML: a área de texto onde o usuário insere o texto e a área de texto onde o resultado é exibido.

Quando você chama document.getElementById('input-texto'), o JavaScript retorna o primeiro elemento que encontra com esse id, que é a área de texto onde o usuário insere o texto. Por isso, está copiando o texto original e não o resultado da criptografia.

Uma solução possível seria usar ids diferentes para esses elementos. Por exemplo, você pode usar "input-texto" para a área de texto onde o usuário insere o texto e "output-texto" para a área de texto onde o resultado é exibido.

Aqui está como você poderia alterar seu código:

// Na função criptografar e descriptografar
document.getElementById('output').innerHTML = '<textarea readonly id="output-texto">' + resultCripto +
    '</textarea>' + '<button class="btn-copiar" id="copiar" onclick="copiar()">Copiar</button>';

// Na função copiar
function copiar() {
    var textoCop = document.getElementById('output-texto');
  
    textoCop.select();
    document.execCommand('copy');
    alert("Texto copiado.");
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

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