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

Função .click(mostraPlacar) não funcionam

Boa noite.

Estou fazendo o primeiro "Mãos na massa: Exibindo e ocultando o placar" da "aula 01 - Animações com jQuery" e pelo que entendi quando chegasse no final deste exercício ao clicar no botão ele deveria ser exibido ou escondido, mas não é o que ocorre.

Quando clicado não acontece nada, testei em diferentes navegadores e o resultado é o mesmo. A princípio está tudo conforme descrito na aula, poderiam me ajudar?

Os trechos referentes a aula 01 estão comentadas como " // AULA 01", "/* AULA 01*/" e ""

Abaixo segue o código...

<!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, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <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">10</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>

            <!-- AULA 01-->
            <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light green">
              <i class="material-icons">assignment</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>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>

</body>
</html>
.campo-digitacao {
    font-size: 20px;
    height: 130px;
    border: 3px solid black;
}

.frase {
    font-size: 20px;
    text-align: left;
}

.campo-desativado {
    background-color: lightgray;
}

.icones {
    vertical-align: middle;
}

.borda-verde {
    border: 3px solid green;
}

.borda-vermelha {
    border: 3px solid red;
}

/* AULA 01*/
.placar {
  display: none;
}

body {
  overflow: scroll;
}
$("#botao-placar").click(mostraPlacar); // AULA 01

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.append(linha);
}

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

// AULA 01
function mostraPlacar() {
  $(".placar").stop().slideToggle(800);
}

function removeLinha() {
    event.preventDefault();
    $(this).parent().parent().remove();
}

Fico no aguardo.

3 respostas

Olá Leonardo,

$("#botao-placar").click(mostraPlacar); // AULA 01

Acredito que não esteja funcionando por que nessa linha você não está chamando a função.

Quando você chama a função dessa forma

mostraPlacar;

você consegue ver a definição da função.

Para executar uma função você precisa fazer:

mostraPlacar();

Dessa forma, o código final ficaria:

$("#botao-placar").click(mostraPlacar()); // AULA 01
solução!

Oi Leonando, tudo bem? Você colocou o js pra buscar o botão do placar pelo id, mas no HTML não tem nenhum elemento com esse id.

Boa noite pessoal.

Agradeço aos dois, mas o que resolveu foi a resposta do Wanderson. Me passei na hora de criar o código do segundo botão, copiei e colei e não troquei o id para o que eu queria. Deveria ficar assim:

<a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
              <i class="material-icons">assignment</i>
</a>

Mas de novo, obrigado pela atenção dos dois.

Vlws

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