Quando faço a operação de console.log(tempoRestante) incluindo o comando JQUERY campo.on("focus", function(); o programa não funciona corretamente, pois não aparece nada no console. Gostaria de saber o porquê ao usar o comando JQUERY o programa não entra na função anônima para mostra o TEMPO RESTANTE. Se eu não usar o comando JQUERY, o TEMPO RESTANTE aparece normalmente
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Alura Typer</title>
</head>
<body>
<h1>Alura Typer</h1>
<p class="frase">Lorem ipsum dolor sit am et, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="informacoes">
<li><span id ="tamanho-frase">19</span> palavras</li>
<li><span id ="tempo-digitacao">10</span> segundos</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols ="40"></textarea>
<ul>
<li><span id="contador-caracteres">0</span> caracteres</li>
<li><span id="contador-palavras">0</span> palavras</li>
</ul>
<script src="jquery-3.6.0.js"></script>
<script src="main.js"></script>
</body>
</html>
var frase = $(".frase").text();
console.log(frase);
var numPalavras = frase.split(" ").length;
console.log(numPalavras);
var tamanhoFrase = $("#tamanho-frase");
tamanhoFrase.text(numPalavras);
var campo = $(".campo-digitacao");
campo.on("input", function() {
var conteudo = campo.val();
var qtdPalavras = conteudo.split(/\S+/).length - 1;
$("#contador-palavras").text(qtdPalavras);
var qtdCaracteres = conteudo.length;
$("#contador-caracteres").text(qtdCaracteres);
var tempoRestante = $("#tempo-digitacao").text();
campo.on("focus", function(){
console.log(tempoRestante);
});
});