Quando inicio o jogo pela primeira vez, a validação funciona, ficando verde quando esta certo e vermelho quando esta errado. Porém, depois de reiniciar o jogo, todos os input's que faço no campo dão como errado, ou seja, exibem a borda vermelha, mesmo se tudo estiver correto. Ficaria muito agredecido pela ajuda.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Alura Typer</title>
<link rel="stylesheet" href="css/libs/materialize.min.css" >
<link rel="stylesheet" href="css/libs/google-fonts.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container">
<h1 class="center" >Alura Typer</h1>
<p class="frase center">teste de palavras</p>
<ul class="informacoes center">
<li>
<i class="small material-icons icones">description</i>
<span id="tamanho-frase">1</span> palavras
</li>
<li>
<i class="small material-icons icones">query_builder</i>
<span id="tempo-digitacao">3</span> segundos
</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols="40" ></textarea>
<div class="botoes">
<a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red" >
<i class="material-icons">restore</i>
</a>
<a class="btn-floating btn-large waves-effect waves-light red" >
<i class="material-icons">add</i>
</a>
<a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green" >
<i class="material-icons">assignment</i>
</a>
</div>
<ul class="center" >
<li><span id="contador-caracteres" >0</span> caracteres</li>
<li><span id="contador-palavras" >0</span> palavras</li>
</ul>
var tempoInicial = $("#tempo-digitacao").text();
$(document).ready(function(){
console.log("Pagina carregada!")
var campo = $(".campo-digitacao");
var botao_reiniciar = $("#botao-reiniciar");
frase();
iniciaContadores(campo);
iniciaCronometro(campo);
reinicia(botao_reiniciar,campo);
valida(campo);
})
function frase(){
var frase = $(".frase").text();
var numPalavras = frase.split(" ").length;
$("#tamanho-frase").text(numPalavras);
}
function iniciaContadores(campo){
campo.on("input", function(){
var texto = campo.val();
var qtdPalavras = texto.split(/\S+/).length - 1;
$("#contador-palavras").text(qtdPalavras);
var qtdCaracteres = texto.length;
$("#contador-caracteres").text(qtdCaracteres);
});
}
function iniciaCronometro(campo){
var tempoRestante = $("#tempo-digitacao").text();
campo.one("focus", function(){
$("#botao-reiniciar").attr("disabled", true);
var cronometroID = setInterval(function(){
tempoRestante--;
$("#tempo-digitacao").text(tempoRestante);
if (tempoRestante === 0){
clearInterval(cronometroID);
finalizaJogo(campo);
}
}, 1000)
});
}
function finalizaJogo(campo){
campo.attr("disabled", true);
campo.addClass("campo-desabilitado");
$("#botao-reiniciar").attr("disabled", false);
insereNoPlacar();
}
function valida(campo){
var frase = $(".frase").text();
campo.on("input", function(){
var digitado = campo.val();
var comparavel = frase.substr(0,digitado.length);
if (digitado === comparavel){
campo.addClass("campo-correto");
campo.removeClass("campo-errado");
} else{
campo.addClass("campo-errado");
campo.removeClass("campo-correto");
}
});
}
function reinicia(botao,campo){
botao.on("click", function(){
campo.attr("disabled", false);
campo.val(" ");
$("#contador-palavras").text("0");
$("#contador-caracteres").text("0");
$("#tempo-digitacao").text(tempoInicial);
campo.removeClass("campo-desabilitado");
campo.removeClass("campo-correto");
campo.removeClass("campo-errado");
iniciaCronometro(campo);
})
}
.campo-digitacao{
font-size: 20px;
height: 130px;
border: 3px solid black;
}
.frase{
font-size: 20px;
}
.campo-desabilitado{
background-color: lightgray;
}
.campo-habilitado{
background-color: white;
}
.icones{
vertical-align: middle;
}
.campo-correto{
border: 3px solid green;
}
.campo-errado{
border: 3px solid red;
}
.placar{
display: none;
}
body{
overflow: scroll;/*Ja deixa o lugar do scroll separado*/
}