Funcionalidades da Função innerhtml | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Pessoal queria ajuda para entender o porque da função innerhtml não está permanecendo no meu HTML. Basicamente, fiz esse código em JavaScript para o Desafio do codificador

function decodi(){
    var multi = document.querySelector('#entrada').value;
    var atualizado = multi.replace(/e/g, "enter").replace(/i/g, "imes").replace(/a/g, "ai").replace(/o/g, "ober").replace(/u/g, "ufat");
    document.querySelector('.quadrobranco').innerHTML = atualizado;
}

E está funcionando, a única questão está sendo o tempo em que ele fica em tela, que é milésimos de segundos. Alguém pode me ajudar?

Vou deixar o resto dos códigos de CSS e HTML:

*Deixei, algumas coisas comentadas para ver se resolvia, mas não foi...

CSS:

*{
    background-color: #F3F5FC;
}

body{
    position: relative;
    width: 1440px;
    height: 1024px;
    }

.logo{
/* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    position: absolute;
    /* width: 120px; */
    height: 48px;
    left: 40px;
    top: 40px;
}

#entrada{
    position: relative;
    width: 680px;
    height: 48px;
    left: 240px;
    top: 168px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 150%;
    color: #0A3871;
    border-radius: 5px;
    border:none;
}

.bt1{
    position: absolute;
    flex-direction: row;
    align-items: center;
    padding: 24px;
    gap: 8px;
    width: 328px;
    height: 67px;
    background: #0A3871;
    border-radius: 24px;
    flex: none;
    order: 0;
    flex-grow: 0;
    color: #FFFFFF;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    border:none;
    top: 579px;
    left: 240px;
}

.bt2{
    position: absolute;
    flex-direction: row;
    align-items: flex-end;
    padding: 24px;
    gap: 8px;
    width: 328px;
    height: 67px;
    background: #D8DFE8;
    border: 1px solid #0A3871;
    border-radius: 24px;
    flex: none;
    order: 0;
    flex-grow: 0;
    color: #0A3871;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    top: 579px;
    left: 614px;
}

.quadrobranco{
    position: absolute;
    width: 400px;
    height: 640px;
    left: 1000px;
    top: 40px;
    /* background: #FFFFFF; */
    box-shadow: 0px 24px 32px -8px rgba(7, 4, 206, 0.336);
    border-radius: 32px;
    justify-content: center;
}

.lupa{
    position: absolute;
    width: 336px;
    height: 304px;
    left: 31px;
    top: 73px;
    background: #FFFFFF;
}

.p1{
    position: absolute;
    left: 31px;
    top: 400px;
    background: #FFFFFF;
    width: 336px;
    height: 58px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
    text-align: center;
    color: #343A40;
}

.p2{
    position: absolute;
    left: 69px;
    top: 460px;
    background: #FFFFFF;
    width: 256px;
    height: 58px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    text-align: center;     
    color: #495057;

}

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <img src="imag/Vector.png" alt="" class="logo">
    <title> Decodificador de Texto</title>
</head>
<body>
    <script src="index.js" defer> </script>
    <main>
        <form>
            <input id="entrada" placeholder="Digite seu texto" type="text">
            <!-- <p>Utilizar apenas letras minusculas</p> -->
            <div class="boto">
                <button class="bt1" onclick="decodi()"> Criptografar </button>
                <button class="bt2"> Descriptografar </button>
            </div>
        </form>
        <div class="quadrobranco">
            <!-- <img src="imag/lupa.png" alt="" class="lupa">
            <p class="p1">Nenhuma mensagem encontrada</p>
            <p class="p2">Digite um texto que você deseja criptografar ou descriptografar.</p> -->
        </div>
    </main>
</body>
</html>

Olá, João! Tudo certo?

Peço desculpas pela demora no retorno.

O que acontece aqui é que seu elemento button está dentro do elemento forms, e quando não declaramos um tipo para o botão, ele terá como padrão o type="submit" que, ao ser clicado, envia as informações do forms e recarrega a página. Aqui está o problema, você preenche e ao clicar, a página é recarregada.

Para resolver isso, basta definir um tipo="button" para os seus botões no documento HTML:

   <div class="boto">
          <button class="bt1" type="button" onclick="decodi()">
            Criptografar
          </button>
          <button class="bt2" type="button">Descriptografar</button>
        </div>

Caso tenha ficado com alguma dúvida, não deixe de compartilhar!

Continue praticando e evoluindo na sua jornada.

Bons estudos e até mais!

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