Solucionado
Quando realizo o comando:
var linhas = $("tbody>tr");
console.log(linhas);Não é retornado o código html, assim como no vídeo. O que é retornado está abaixo:
jQuery.fn.init [tr, prevObject: jQuery.fn.init(1)]
0: tr
length: 1
prevObject: jQuery.fn.init [document]
__proto__: Object(0)Outro problema que ocorre é quando escrevo o código abaixo, o que é printado é o html do botão que acabei de clicar.
linhas.each(() => {
console.log(this);
})
Oi, Antonio, tudo bem?
De acordo com o que você colocou aqui, está conforme a aula e o código do instrutor. Provavelmente outro trecho está desencadeando esse problema. Coloca aqui as outras partes do código ou se preferir, coloca no github. Aguardamos :}
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>
<div class="container">
<h1 class="center">Alura Typer</h1>
<p class="frase center">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab pariatur mollitia id aliquid quo voluptatem. Odit labore laudantium quae vero. Dolore, repudiandae aspernatur? Provident commodi tempore excepturi unde. Enim, placeat!
</p>
<div class="center">
<img src="img/spinner.gif" alt="Spinner" id="spinner" />
<p id="erro">Ocorreu um erro, por favor tente novamente</p>
</div>
<ul class="informacoes center">
<li>
<i class="small material-icons icones">description</i>
<span id="tamanho-frase">5</span> palavras
</li>
<li>
<i class="small material-icons icones">query_builder</i>
<span id="tempo-digitacao">1</span> segundos
</li>
</ul>
<textarea class="campo-digitacao" 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>
<a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
<i class="material-icons">assignment</i>
</a>
<a id="botao-frase" class="btn-floating btn-large waves-effect waves-light blue">
<i class="material-icons">shuffle</i>
</a>
<a id="botao-frase-id" class="btn-floating btn-large waves-effect waves-light cyan">
<i class="material-icons">repeat_one</i>
</a>
<a id="botao-sync" class="btn-floating btn-large waves-effect waves-light yellow">
<i class="material-icons">swap_vert</i>
</a>
<input type="number" id="frase-id" min="0">
</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>No. de palavras</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/placar.js"></script>
<script src="js/frase.js"></script>
</body>
</html>
placar.js
$("#botao-placar").click(mostraPlacar);
$("#botao-sync").click(sincronizaPlacar);
function inserePlacar() {
var corpoTabela = $(".placar").find("tbody");
var usuario = "Douglas"
var numPalavras = $("#contador-palavras").text();
var linha = novaLinha(usuario, numPalavras);
linha.find(".botao-remover").click(removeLinha);
corpoTabela.prepend(linha);
$(".placar").slideDown(500);
scrollPlacar();
}
function scrollPlacar(){
let posicaoPlacar = $(".placar").offset().top;
console.log(posicaoPlacar);
$("body").animate({
scrollTop: posicaoPlacar+"px"
},1000);
}
function sincronizaPlacar() {
let placar = [];
var linhas = $("tbody>tr");
linhas.each(() => {
console.log(this);
let usuario = $(this).find("td:nth-child(1)").text();
let palavras = $(this).find("td:nth-child(2)").text();
console.log(usuario);
console.log(palavras);
})
}
function novaLinha(usuario, palavras) {
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(palavras);
var colunaRemover = $("<td>");
var link = $("<a>").addClass("botao-remover").attr("href", "#");
var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");
link.append(icone);
colunaRemover.append(link);
linha.append(colunaUsuario);
linha.append(colunaPalavras);
linha.append(colunaRemover);
return linha;
}
function removeLinha() {
event.preventDefault();
let linha = $(this).parent().parent();
linha.fadeOut();
setTimeout(() => {
linha.remove();
},1000);
}
function mostraPlacar() {
$(".placar").stop().slideToggle(600);
}
O meu restá com o mesmo erro Antônio, não sei se é um erro , pois o cód funciona, porém na ferramenta adm apresenta diferente da aula. Não sei se pode ser esse o erro , mas tanto no servidor frases/placar está apresentando difierente segu abaixo:
[{"usuario":"Flavio","pontos":"2","id":"1KPvYcMz48RjVlPl"},{"usuario":"Douglas","pontos":"5","id":"7A1UooSmyv6Zeg5e"},{"usuario":"Douglas","pontos":"4","id":"FvsCAnUdU2GGtZWC"},{"usuario":"Nico","pontos":"2","id":"OD8WOnka7c9I939r"},{"usuario":"Douglas","pontos":"2","id":"R0tRrzgjzGJWpOxy"},{"usuario":"Douglas","pontos":"2","id":"kXtTv4FjkvloBhEN"}]
Oi, gente :}
Fiz o teste e me é retornado o objeto como no exemplo de vocês, assim como o valor undefined, tirei um print da imagem: https://imgur.com/a/vvvEwpm
Esse objeto somente detalha o o retorno do undefined, não é um erro :}
Bons estudos a todos!
Obrigado Lais, da minha parte Ok.