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>
