Olá Bom dia! Estou tentando adicionar uma linha numa tabela assim como mostra no exercício, mas ao adiciona-lo, automagicamente aparece uma td a mais dentro dos campos mesmo concatenando certo toda a linha. Era pra ser assim
<tr>
<td>Edu</td>
<td>2</td>
</tr>mas esta adicionando assim
<tr>
<td>Edu</td>
<td></td>
<td>2</td>
<td></td>
</tr>Ja tentei debugar várias vezes e ver oque ocorre mas não consegui entender o porquê disso, se alguém puder dar uma força ficaria muito agradecido! :D segue abaixo : JS
var campo = $(".campo-digitacao");
var tempoInicial = $("#tempo-digitacao").text();
//nova function
$(function(){
atualizaTamanhoFrase();
inicializaContadores();
inicializaCronometro();
inicializaBordaVerificadora();
$("#botao-reiniciar").click(reiniciaJogo);
});
function atualizaTamanhoFrase() {
var frase = $(".frase").text();
var numPalavras = frase.split(" ").length;
var tamanhoFrase = $("#tamanho-frase");
tamanhoFrase.text(numPalavras);
}
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) {
// campo.addClass("campo-desativado", true);
inserePlacar();
finalizaJogo();
clearInterval(cronometroID);
}
}, 1000);
});
}
function finalizaJogo(){
campo.toggleClass("campo-desativado");
campo.attr("disabled", true);
}
function inicializaBordaVerificadora(){
var frase = $(".frase").text();
campo.on("input",function(){
var digitado = campo.val();//frase inteira após digitado
var pedacoDaFrase = frase.substr(0,digitado.length);//pedaço da frase enqianto se esta digitando - inicio =0 até digitado.length
if(digitado == pedacoDaFrase){
console.log("acertou");
campo.addClass("campo-certo");
campo.removeClass("campo-errado");
}else {
console.log("errou");
campo.addClass("campo-errado");
campo.toggleClass("campo-certo");
}
// para esse if poderíamos:
// var ehCorreto = (digitado == comparavel);
// campo.toggleClass("borda-verde", ehCorreto);
// campo.toggleClass("borda-vermelha", !ehCorreto);
//existe tambem o:
//var digitouCorreto = frase.startsWith(digitado);
//if(digitouCorreto) {
//campo.addClass("borda-verde");
//} else {
//campo.addClass("borda-vermelha");
//}
});
}
function reiniciaJogo(){
campo.attr("disabled",false);
campo.val("");
$("#contador-palavras").text("0");
$("#contador-caracteres").text("0");
$("#tempo-digitacao").text(tempoInicial);
inicializaCronometro(); //novo
//campo.removeClass("campo-desativado");
campo.toggleClass("campo-desativado");//pegando classe do css aqui sem ponto
campo.removeClass("campo-errado");
campo.removeClass("campo-certo");
}
function inserePlacar(){
var corpoTabela = $(".placar").find("tbody");//.find desce a árvore de nós apartir do .placar procurando o tbody
var usuario = "Edu";
var numPalavras = $("#contador-palavras").text();
var linha = "<tr>"+
"<td>"+usuario+"<td>"+
"<td>"+numPalavras+"<td>"+
"</tr>";
corpoTabela.append(linha);
}HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Duds 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">Duds Typer</h1>
<p class="frase center" >Do ,or do not, there is, no try</p>
<ul class="informacoes center" >
<li>
<i class="small material-icons icones">description</i>
<span id="tamanho-frase">8</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 center" 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>
</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">
<h3 class="center">Placar</h3>
<table class="centered bordered">
<thead>
<tr>
<th>Nome</th>
<th>N de palavras</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
</section>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
