1
I’m doing an event exercise that consists of typing a name into the input that will be printed below by pressing "send". It is then possible to apply new styles to this text, such as color, uppercase letter, increase font and hide and show the text again. The first time works perfectly, but when I click on "clean" and type another name, the new name already comes with the formatting of the previous text. I tried to initialize the variable using name = " ", but nothing happens. How can I fix it? (and excuse me if the title of the question is not very clear, I did not know exactly how to address this doubt)
<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>
Just reset the values in the function cleanName(), example:
document.getElementById("result").style.color = "black"; 
 document.getElementById("result").style.fontSize = "20px";– LeAndrade