Passei algumas horas quebrando a cabeça tentando resolver esse problema, quando clico no botão para reiniciar o jogo/contagem(botão New Game), ele apenas pisca com o tempo inicial e logo continua a primeira contagem, se clicar mais vezes no botão ele abre outras contagens e fica um looping de vários números até a primeira contagem chegar a zero. Já vi outros tópicos aqui com o mesmo problema mas nenhuma solução...
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Words Per Second</title>
</head>
<body>
<h1>Words Per Second</h1>
<p class="frase">The amber droplet hung from the branch, reaching fullness and ready to drop. It waited. While many of the other droplets were satisfied to form as big as they could and release, this droplet had other plans.</p>
<ul class="informacoes">
<li><span id="tamanho-frase"></span> words</li>
<li id="segundos-tempo-digitacao"><span id="tempo-digitacao"></span> seconds</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols="40"></textarea>
<ul>
<li><span id="contador-caracteres"></span> characters</li>
<li><span id="contador-palavras"></span> words</li>
</ul>
<button id="botao-reiniciar">New Game</button>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/contadorTextArea.js"></script>
</body>
</html>
Jquery
$(document).ready(function(){
inicializaCronometro('s')
contadorInferior()
})
let frase = $(".frase").text();
let numeroPalavras = frase.split(" ").length;
let tamanhoDaFrase = $("#tamanho-frase");
tamanhoDaFrase.text(numeroPalavras)
let tempoRestante = $("#tempo-digitacao").text()
tempoRestante = numeroPalavras -(numeroPalavras/3)
let tempoInicial = tempoRestante
let botaoReiniciar = $("#botao-reiniciar")
botaoReiniciar.click(function(){
botaoDeReiniciar()
})
//funções
function inicializaCronometro(){
let campoTimer = $(".campo-digitacao")
campoTimer.one("focus", function(){
const intervalId = setInterval(function(){
tempoRestante--
$("#tempo-digitacao").text(Math.round(tempoRestante))
if(tempoRestante <= 0){
campoTimer.attr("disabled", true)
clearInterval(intervalId)
$("#tempo-digitacao").text(Math.round(tempoInicial))
}
},1000)
})
}
function contadorInferior(){
let campo = $(".campo-digitacao")
campo.on("input", function(){
let conteudo = campo.val()
let qtdPalavras = conteudo.split(/\S+/).length -1 //expressão regular que busca por espaço vazios
$("#contador-palavras").text(qtdPalavras)
conteudo = conteudo.replace(/ /g,'') //expressão regular que descontabiliza espaço vazios
let qtdCaracteres = conteudo.length
$("#contador-caracteres").text(qtdCaracteres)
})
}
function botaoDeReiniciar(){
campoDigitacao.attr("disabled", false)
campoDigitacao.val("")
$("#contador-palavras").text("0")
$("#contador-caracteres").text("0")
$("#tempo-digitacao").text(Math.round(tempoInicial))
inicializaCronometro()
}
