When I invoke the 'valid' function nothing happens. What is my mistake? I also need to make the 'valid' and 'like' message disappear after 5s (I could not use setTimeout)
function dislike() {
document.getElementsByClassName('esconde')[0].style.display = "block";
}
function like() {
document.getElementsByClassName('bot')[0].innerHTML = "<h1 style='text-shadow: 0px 2px lime; color: #333;'>Obrigado!!!</h1>";
}
function valida() {
document.getElementsByClassName('bot')[0].innerHTML = "<h2>Tentaremos melhorar!</h2>";
}
legend {
margin-top: 10px;
margin-left: 20px;
}
button {
border: none;
background-color: lemonchiffon;
border-radius: 50%;
margin-right: 10px;
padding: 10px;
box-shadow: 0px 8px #666;
cursor: pointer;
vertical-align: top;
}
#azul:active {
background-color: skyblue;
cursor: pointer;
box-shadow: 0px 5px black;
margin-top: 7px;
}
#red:active {
background-color: tomato;
cursor: pointer;
box-shadow: 0px 5px black;
margin-top: 7px;
}
.btn2 {
border-radius: 20px;
padding: 5px;
background-color: lightgreen;
}
.btn2:active {
box-shadow: 0px 5px black;
margin-top: 7px;
}
.esconde {
display: none;
margin-top: -15px;
}
.bot {
float: right;
margin-top: -20%;
margin-right: 40%;
text-align: center;
}
<div class="bot">
<h2>Avalie nosso site</h2>
<button onclick="like()" id="azul">
<span class="fa fa-thumbs-o-up fa-3x" style="color: navy;"></span>
</button>
<button onclick="dislike()" id="red">
<span class="fa fa-thumbs-o-down fa-3x" style="color: red;"></span>
</button>
<br>
<div class="esconde">
<br>
<legend style="margin-bottom: -10px;"><strong>O que lhe incomoda?</strong></legend>
<br>
<form onsubmit="valida()">
<fieldset>
<input type="radio" name="rad" value="porn" checked>Conteúdo pesado<br>
<input type="radio" name="rad" value="expor">Expôs minha vida íntima<br>
<input type="radio" name="rad" value="desconf">Sinto desconforto aqui<br>
<button type="submit" class="btn2">Enviar</button>
</fieldset>
</form>
</div>
</div>