Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Append insere linha vazia na tabela e remove a linhas anteriores

Fiz o código de acordo com o exercício. Na tabela de pontuação está a

com a linha de título e na deixei uma linha de exemplo. Ao executar a função inserePlacar() após o término do tempo, as da e da tabela ficam sem texto algum e o placar novo não é inserido. Fiz um console.log() na variável linha e o retorno são várias vazias, sem o texto. Se eu não estiver ficando maluco, o códigio está exatamente igual ao do exercício. Segue HTML:
<!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>
    <!-- código anterior -->
        <section class="placar">
            <h3 class="center">Placar</h3>
            <table class="centered bordered">
                <thead>
                    <tr>
                        <td>Usuário</td>
                        <td>No. de Palavras</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Usuario Exemplo</td>
                        <td>99</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

Segue código Javascript:

var tempoInicial = $("#cronometro").text();
var campo = $(".campo-digitacao");

$(function() {
    atualizaTamanhoFrase();
    atualizaContadores();
    inicializaCronometro();
    inicializaMarcadores()
    $("#botao-reiniciar").click(reiniciaJogo);
    campo.val("");

})

function atualizaTamanhoFrase() {
    var frase = $(".frase").text();
    var numPalavras = frase.split(" ").length;
    var tamanhoFrase = $("#tamanho-frase");
    tamanhoFrase.text(numPalavras);

}


function atualizaContadores() {

    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);
    });
}

function inicializaCronometro() {
    var tempoRestante = $("#cronometro").text();
    campo.one("focus", function() {
        var cronometroId = setInterval(function() {
            tempoRestante--;
            $("#cronometro").text(tempoRestante);
            $("#botao-reiniciar").attr("disabled", true);
            if(tempoRestante < 1) {
                 clearInterval(cronometroId);
                 $("#botao-reiniciar").attr("disabled", false);
                 finalizaJogo();
            }
        }, 1000);
    });
}
 function finalizaJogo() {
     campo.attr("disabled", true);
     campo.toggleClass("campo-desativado");
     inserePlacar();
}
function reiniciaJogo() {
        campo.attr("disabled", false);
        campo.val("");
        $("#contador-caracteres").text("0");
        $("#contador-palavras").text("0");
        $("#cronometro").text(tempoInicial);
        inicializaCronometro();
        campo.toggleClass("campo-desativado");
        campo.removeClass("borda-vermelha");
        campo.removeClass("borda-verde");
}

function inicializaMarcadores() {
    var frase = $(".frase").text();
    campo.on("input", function() {
        var digitado = campo.val();
        var comparavel = frase.substr(0, digitado.length);
        if ( digitado == comparavel) {
            campo.addClass("borda-verde");
            campo.removeClass("borda-vermelha");
        } else {
            campo.addClass("borda-vermelha");
            campo.removeClass("borda-verde");
        }
    })
}

function inserePlacar() {
    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Natan";
    var numPalavras = $("contador-palavras").text();

    var linha = novaLinha(usua
2 respostas

Fala Natan,

Tá faltando uma parte do código, justamente na função que insere o placar.

solução!

Olá Natan, tudo beleza? Está faltando uma parte da sua função. De qualquer forma a minha variável "linha" funcionou assim:

 var linha = "<tr>" + 
                    "<td>" + usuario + "</td>" +
                    "<td>" + numPalavras + "</td>"
                "</tr>";

Depois basta adicionar na sua tabela com:

 corpoTabela.prepend(linha);

Se não funcionar, verifique se todos os nomes das classes e IDs estão iguais. Tive alguns problemas com isso pois coloquei alguns nomes diferentes dos quais o instrutor usou e isso acabou confundindo depois.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software