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

Linha de usuário Duplicada

Quando rodo o programa, o usuário vem duplicado. Já tentei uma das opções que tem no Forum, mas continua o erro.

Código do JavaScript:

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

$(function(){
 atualizaTamanhoFrase();
 inicializaContadores();
 inicializaCronometro();
 inicializaMarcadores();
 $("#botao-reiniciar").click(reiniciaJogo);
});


function atualizaTamanhoFrase(){
var frase = $(".frase").text(); //seleciona o texto dentro da tag
var numPalavras = frase.split(" ").length; // dividi a frase em palavras de acordo com o espaço
var tamanhoFrase = $("#tamanho-frase");
tamanhoFrase.text(numPalavras);

}

var campo = $(".campo-digitacao");

function inicializaContadores(){
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 = $("#tempo-digitacao").text();
campo.one("focus", function(){
    var cronometroID = setInterval(function(){
        tempoRestante--;
        $("#tempo-digitacao").text(tempoRestante);
        if(tempoRestante < 1){
           clearInterval(cronometroID);
           finalizaJogo();
        } 

    }, 1000);

});
}

function finalizaJogo(){
    campo.attr("disabled", true);
    campo.toggleClass("campo-desativado"); // toggleclass serve tanto para adicioanar classes como para remover
    inserePlacar(); /// alterar o css sem forçar ele diretamente no js

}


function inicializaMarcadores(){

var frase = $(".frase").text();
campo.on("input", function(){
    var digitado = campo.val();
    console.log("Digitado:" + digitado);
    console.log("Frase C.:" + comparavel);
    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 = "Natalia";
    var numPalavras = $("#contador-palavras").text();

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

    corpoTabela.prepend(linha);
}

function reiniciaJogo(){
    campo.attr("disabled", false);
    campo.val("");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
    campo.toggleClass("campo-desativado");
    campo.removeClass("borda-vermelha");
    campo.removeClass("borda-verde");

}



Código do 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/estilos.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">


</head>
<body>
  <div class = "container">
   <h1 class="center"> Alura Typer </h1>
   <p class="frase center"> Lorem ipsun dolar sit anet, consectetur sdipisicing elit, Assunende quibusdan quas cupiditate errar natus delectus suscipt, tamporibus at, optio ullan, doloribus nostrun eveniet dolores consectetur pariatur autes repellat nulla sit.</p>

   <ul class="informacoes center"> 
       <li>
      <i class="small material-icons icones"> description</i>
      <span id="tamanho-frase"> 0 </span> palavras </li>
       <li>
         <i class="small material-icons icones"> query_builder</i>
      <span id="tempo-digitacao"> 10 </span> segundos 
    </li>

   </ul>

   <textarea class="campo-digitacao" rows="8" cols="40"> </textarea>

   <div class="botoes">

    <a class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar">
      <i class="material-icons"> restore</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>

  <section class="placar center">
   <h3 class="center"> Placar </h3> 
   <table class="centered bordered">
    <thead>
      <tr>
        <th> Nome</th>
        <th> Nº de Palavras </th>
       </tr>
    </thead>
    <tbody>
      <tr>
        <td> Douglas </td>
        <td> 10 </td>
    </tbody>

    <tbody>
      <tr>
        <td> Douglas </td>
        <td> 10 </td>
    </tbody>


  </section>
</div>

   <script src="js/jquery.js"></script>
   <script src="js/main.js"></script>


</body>
</html>
2 respostas

Boa tarde, Jucileia! Como vai?

Eu não entendi uma coisa: qual usuário fica duplicado?

solução!

Olá, boa tarde!

O usuário ficava duplicado quando era inserido na tabela. Mas já achei o erro, o código do HTML estava com dois tbody.

Obrigado pela atenção.