Estou fazendo um exercício de eventos que consiste em digitar um nome no input que será impresso em baixo ao apertar em “enviar”. Depois, é possível aplicar novos estilos a esse texto, como cor, letra maiúscula, aumentar fonte e esconder e mostrar novamente o texto. Da primeira vez, funciona perfeitamente, mas quando clico em “limpar” e digito outro nome, o novo nome já vem com as formatações do texto anterior. Tentei inicializar a variável usando nome = “ “, mas nada acontece. Como posso resolver? (e me desculpem caso o título da pergunta não esteja muito claro, não soube exatamente como endereçar essa dúvida)
<body>
Digite o nome que deseja animar: <input type="text" id="nome"><br>
<button onclick="nameAnimator()"> Enviar </button>
<button onclick="limpaNome()"> Limpar </button>
<p id="result"></p>
<button onclick="aumentarFonte()"> Aumentar </button>
<button onclick="mudaCor()"> Colorir </button>
<button onclick="letraMaiusc()"> Letra Maiúscula </button>
<button onclick="esconder()"> Esconder </button>
<button onclick="mostrar()"> Mostrar </button>
<script>
function nameAnimator(){
nome = document.getElementById("nome").value;
document.getElementById("result").innerHTML = nome;
}
function limpaNome(){
document.getElementById("nome").value = " ";
document.getElementById("result").innerHTML = " ";
}
function aumentarFonte(){
document.getElementById("result").style.fontSize = "35px";
}
function mudaCor(){
document.getElementById("result").style.color = "red";
}
function letraMaiusc(){
document.getElementById("result").innerHTML = nome.toUpperCase();
}
function esconder(){
document.getElementById("result").innerHTML = "";
}
function mostrar(){
document.getElementById("result").innerHTML = nome;
}
</script>
</body>
document.getElementById("result").style.color = "black"; document.getElementById("result").style.fontSize = "20px";