path: root/files/pt-br/learn/javascript/first_steps/what_went_wrong/index.html

---
title: O que deu errado? Resolvendo problemas no JavaScript
slug: Learn/JavaScript/First_steps/What_went_wrong
translation_of: Learn/JavaScript/First_steps/What_went_wrong
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div>

<p class="summary">Quando você construiu o jogo "Adivinhe o número" no artigo anterior, você talvez tenha descoberto que ele não funcionou. Não tema — este artigo tem como objetivo impedir que você arranque os cabelos por causa desses problemas, fornecendo-lhe algumas dicas simples de como encontrar e corrigir erros nos programas JavaScript.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Pré-requesitos:</th>
   <td>
    <p>Conhecimentos básicos de informática, uma compreensão básica de HTML e CSS, uma compreensão do que é JavaScript.</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Ganhar habilidade e confiança para começar a resolver problemas simples em seu próprio código.</td>
  </tr>
 </tbody>
</table>

<h2 id="Tipos_de_erros">Tipos de erros</h2>

<p>De um modo geral, quando você faz algo errado no código, existem dois tipos principais de erros que você encontrará:</p>

<ul>
 <li><strong>Erros de sintaxe:</strong> são erros de ortografia em seu código que realmente fazem com que o programa não seja executado, ou pare de trabalhar parcialmente - você geralmente receberá algumas mensagens de erro também. Estes geralmente são adequados para consertar, desde que você esteja familiarizado com as ferramentas certas e saiba o que as mensagens de erro significam!</li>
 <li><strong>Erros lógicos: </strong>são erros onde a sintaxe está realmente correta, mas o código não é o que você pretendia, o que significa que o programa é executado com sucesso, mas dá resultados incorretos. Muitas vezes, eles são mais difíceis de consertar do que erros de sintaxe, pois geralmente não há uma mensagem de erro resultante para direcioná-lo para a origem do erro.</li>
</ul>

<p>Ok, então não é assim tão simples - há alguns outros diferenciadores à medida que você aprofunda. Mas as classificações acima serão bem úteis nesta fase inicial da sua carreira. Examinaremos esses dois tipos a seguir.</p>

<h2 id="Um_exemplo_errôneo">Um exemplo errôneo</h2>

<p>Para começar, voltemos ao nosso jogo de adivinhação - porém desta vez estaremos explorando uma versão que tem alguns erros inseridos propositalmente. Vá até o Github e faça uma cópia local de <a href="https://github.com/mdn/learning-area-pt-br/blob/master/javascript/introduction-to-js-1/troubleshooting/jogo-numero-erros.html">jogo-numero-erros.html</a> (<a href="https://mdn.github.io/learning-area-pt-br/javascript/introduction-to-js-1/troubleshooting/jogo-numero-erros.html">veja-o em execução aqui</a>).</p>

<ol>
 <li>Para começar, abra a cópia local dentro do seu editor de texto favorito, e em seu navegador.</li>
 <li>Tente jogar o jogo - você notará que, quando você pressiona o botão "Enviar palpite", ele não funciona!</li>
</ol>

<div class="note">
<p><strong>Nota: </strong>Talvez você tenha sua própria versão de exemplo do jogo que não funciona, e pode querer consertá-la! Nós ainda gostaríamos que você trabalhasse no artigo com a nossa versão, para que possa aprender as técnicas que estamos ensinando aqui. Daí então você pode voltar e tentar consertar seu exemplo.</p>
</div>

<p>Neste ponto, vamos consultar o console do desenvolvedor para ver se identificamos qualquer erro de sintaxe, e então tentar consertá-lo. Você irá aprender como, logo abaixo.</p>

<h2 id="Consertando_erros_de_sintaxe">Consertando erros de sintaxe</h2>

<p>Anteriormente no curso, nós fizemos você digitar alguns comandos simples de JavaScript no <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript</a> (se você não se lembra como, abra o link anterior). O que é ainda mais útil é o fato do console lhe mostrar mensagens de erro sempre que existir algo errado na sintaxe dentro do JavaScript enviado ao motor de JavaScript do navegador. Agora vamos à caça.</p>

<ol>
 <li>Vá até a aba onde você tem aberto o arquivo <code>jogo-numero-erros.html</code> e abra o console JavaScript. Você deverá ver uma mensagem de erro sendo exibida:<br>
  <img alt="" src="https://mdn.mozillademos.org/files/15590/nao-e-uma-funcao.png"></li>
 <li>Esse é um erro bem fácil de identifcar, e o navegador lhe fornece várias informações úteis para lhe ajudar (a captura de tela acima foi feita no Firefox, mas os outros navegadores oferecem informações similares). Da esquerda para a direita, nós temos:
  <ul>
   <li>Um "x" laranja para indicar que esse é um erro.</li>
   <li>Uma mensagem de erro para indicar o que está errado: "TypeError: envioPalpite.addeventListener is not a function"</li>
   <li>Um link "Learn More" que encaminha à uma página no MDN docs explicando o que esse erro significa em uma quantidade enorme de detalhes.</li>
   <li>O nome do arquivo JavaScript, que direciona à aba Debugger das ferramentas de desenvolvimento. Se você clicar nesse link, verá a linha exata onde o erro está destatacada.</li>
   <li>O número da linha onde o erro se encontra, e o número do caractere na linha onde o erro é encontrado primeiro. Neste caso nós temos, linha 86, caractere número 3.</li>
  </ul>
 </li>
 <li>Se olharmos para a linha 86 em nosso nosso código de código, vamos encontrar a seguinte linha:
  <pre class="brush: js">envioPalpite.addeventListener('click', conferir Palpite);</pre>
 </li>
 <li>O erro diz o seguinte "envioPalpite.addeventListener is not a function", que significa envioPalpite.addeventListener não é uma funçao. Então provavelmente digitamos algo errado. Se você não estiver certo da digitação correta de parte da sintaxe, é uma boa ideia procurar a funcionalidade no MDN docs. A melhor forma de fazer isso atualmente é pesquisar por "mdn <em>nome-da-funcionalidade</em>" em seu mecanismo de buscas favorito. Aqui está um atalho para te salvar algum tempo nesse caso: <code><a href="/pt-BR/docs/Web/API/Element/addEventListener">addEventListener()</a></code>.</li>
 <li>Então, olhando nessa essa página, o erro parece ser termos digitado o nome da função errado! Lembre-se de que o JavaScript diferencia letras maiúsculas de minúsculas, então qualquer diferença na digitação ou no uso de letras maiúsculas irá causar um erro. Alterar <code>addeventListener</code> para <code>addEventListener</code> deverá corrigir esse erro. Faça essa alteração no código do seu arquivo.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: Veja nossa página de referência <a href="/pt-BR/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> para mais detalhes sobre esse erro.</p>
</div>

<h3 id="Erros_de_sintaxe_-_segundo_round">Erros de sintaxe - segundo round</h3>

<ol>
 <li>Salve o arquivo e atualize a aba do navegador, e você poderá ver que o erro foi corrigido.</li>
 <li>Agora se você tentar enviar um palpite e pressionar o botão !Enviar palpite" você verá... outro erro!<br>
  <img alt="" src="https://mdn.mozillademos.org/files/15591/variavel-e-nula.png"></li>
 <li>Dessa vez o erro informado é "TypeError: baixoOuAlto is null", na linha 78.
  <div class="note"><strong>Nota</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> é um valor especial que significa "nada", ou "sem valor". Então <code>baixoOuAlto</code> foi declarado e inicializado, mas não com algum valor significativo — não possui nenhum caractere ou valor.</div>

  <div class="note"><strong>Nota</strong>: Esse erro não apareceu assim que a página foi carregada porque esse erro ocorreu dentro de uma função (dentro do bloco <code>conferirPalpite() { ... }</code> ). Como você irá aprender com mais detalhes no nosso artigo de funções mais tarde, o código localizado dentro de funções roda em um escopo separado do código presente fora das funções. Nesse caso, o código não estava rodando e o erro não estava aparecendo até a função <code>conferirPalpite()</code> ser executada na linha 86.</div>
 </li>
 <li>Dê uma olhada na linha 78, e você verá o seguinte código:
  <pre class="brush: js">baixoOuAlto.textContent = 'Seu palpite foi muito alto!';</pre>
 </li>
 <li>Essa linha está tentando definir a propriedade <code>textContent</code> (conteúdo de texto) da variável <code>baixoOuAlto</code> como uma sequência de texto, mas isso não está funcionando porque <code>baixoOuAlto</code> não contém o que deveria conter. Vamos ver o porquê — tente localizar outras instâncias de <code>baixoOuAlto</code> no código. A instância que aparece primeiro no código  JavaScript é na linha 48:
  <pre class="brush: js">var baixoOuAlto = document.querySelector('baixoOuAlto');</pre>
 </li>
 <li>Nesse ponto estamos tentando fazer com que a variável contenha uma referência a um elemento no documento HTML. Vamos conferir se o valor é <code>null</code> (nulo) depois que essa linha é executada. Adicione o seguinte código na linha 49:
  <pre class="brush: js">console.log(baixoOuAlto);</pre>

  <div class="note">
  <p><strong>Nota</strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> é uma função de debugging (correção de erros) realmente útil que exibe um valor na tela do console. Então ela irá imprimir o valor da variável <code>baixoOuAlto</code> na tela do console assim que tentarmos defini-la na linha 48.</p>
  </div>
 </li>
 <li>Salve o arquivo e o atualize no navegador, e você deverá ver agora o resultado do <code>console.log()</code> na tela do seu console.<br>
  <img alt="" src="https://mdn.mozillademos.org/files/15592/console-log-saida.png"><br>
  Pois bem, nesse ponto o valor de <code>baixoOuAlto</code> e <code>null</code>, então definitivamente há um problema com a linha 48.</li>
 <li>Vamos pensar em qual poderia ser o problema. A linha 48 está usando um método <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> para pegar a referência do elemento selecionado com um seletor CSS selector (<em>CSS selector</em>). Olhando mais acima no nosso código, podemos encontrar o parágrafo em questão:
  <pre class="brush: js">&lt;p class="baixoOuAlto"&gt;&lt;/p&gt;</pre>
 </li>
 <li>Então nós precisamos de um seletor de classe aqui, que começa com um ponto (.), mas o seletor passado pelo método <code>querySelector()</code> na linha 48 não tem o ponto. Esse pode ser o problema! Tente mudar <code>baixoOuAlto</code> para <code>.baixoOuAlto</code> na linha 48.</li>
 <li>Tente salvar o arquivo e atualizá-lo no navegador de novo, e a sua declaração <code>console.log()</code> deverá retornar o elemento <code>&lt;p&gt;</code> que queremos. Ufa! Outro erro resolvido! Você pode deletar a linha do seu  <code>console.log()</code> agora, ou mantê-la para referência posterior — a escolha é sua.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: Veja nossa página de referência <a href="/pt-BR/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> para mais detalhes sobre esse erro.</p>
</div>

<h3 id="Erros_de_sintaxe_-_terceiro_round">Erros de sintaxe - terceiro round</h3>

<ol>
 <li>Agora se você tentar jogar novamente, você deve ter mais sucesso — o jogo deve continuar normalmente, até você terminar, ou adivinhando o número, ou ficando sem mais chances.</li>
 <li>Nesse ponto, o jogo falha mais uma vez, e o mesmo erro do início é exibido — "TypeError: botaoReinicio.addeventListener is not a function"! No entanto, dessa vez é listado vindo da linha 94.</li>
 <li>Olhando a linha 94, é fácil de ver que nós cometemos o mesmo erro novamente. Só precisamos alterar mais uma vez <code>addeventListener</code> para <code>addEventListener</code>. Faça isso.</li>
</ol>

<h2 id="Um_erro_de_lógica">Um erro de lógica</h2>

<p>Nesse ponto, o jogo deve rodar normalmente, porém depois de jogá-lo algumas vezes você irá notar que o número "aleatório" que você tem que adivinhar é sempre igual a 1. Definitivamente não é como queremos que o jogo funcione!</p>

<p>Há sem dúvida um problema na lógica do jogo em algum lugar — o jogo não está retornando nenhum erro;simplesmente não está funcionando corretamente.</p>

<ol>
 <li>Procure pela variável <code>numeroAleatorio</code>, e as linhas onde o número aleatório é definido primeiro. A instância que armazena o número aleatório que queremos adivinhar no começo do jogo deve estar na linha 44 ou próximo a ela:

  <pre class="brush: js">var numeroAleatorio = Math.floor(Math.random()) + 1;</pre>
 </li>
 <li>E a linha que gera o número aleatório antes de cada jogo subsequente está na linha 113, ou próximo a ela:
  <pre class="brush: js">numeroAleatorio = Math.floor(Math.random()) + 1;</pre>
 </li>
 <li>Para checar se essas linhas são mesmo o problema, vamos recorrer ao nosso amigo <code>console.log()</code> de novo — insira a seguinte linha diretamente abaixo de cada uma das duas linhas:
  <pre class="brush: js">console.log(numeroAleatorio);</pre>
 </li>
 <li>Salve o arquivo e atualize o navegador, então jogue algumas vezes — você verá que o <code>numeroAleatorio</code> é igual a 1 cada vez em que é exibido no console.</li>
</ol>

<h3 id="Trabalhando_através_da_lógica">Trabalhando através da lógica</h3>

<p>Para consertar isso, vamos considerar como essa linha está trabalhando. Primeiro, nós invocamos <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, que gera um número decimal aleatório entre 0 e 1, ex. 0.5675493843.</p>

<pre class="brush: js">Math.random()</pre>

<p>Em seguida, passamos o resultado invocando <code>Math.random()</code> através de  <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, que arredonda o número passado para o menor número inteiro mais próximo. E então adicionamos 1 ao resultado:</p>

<pre>Math.floor(Math.random()) + 1</pre>

<p>Arredondando um número decimal aleatório entre 0 e 1 para baixo irá sempre retornar 0, então adicionando 1 a ele sempre retornará 1. Precisamos multiplicar o número aleatório por 100 antes de o arredondarmos para baixo. O código seguinte nos daria um número aleatório entre 0 and 99:</p>

<pre class="brush: js">Math.floor(Math.random()*100);</pre>

<p>Por isso, queremos adicionar 1, para nos dar um número aleatório entre 1 e 100:</p>

<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre>

<p>Tente atualizar as duas linhas dessa forma, então salve e atualize o navegador — o jogo deve agora funcionar como nós queremos que funcione!</p>

<h2 id="Outros_erros_comuns">Outros erros comuns</h2>

<p>Existem outros erros comuns com os quais você irá esbarrar em seu código. Essa seção destaca a maioria deles.</p>

<h3 id="SyntaxError_missing_before_statement"><em>SyntaxError: missing ; before statement</em></h3>

<p>Erro de sintaxe: faltando ";" antes da declaração. Esse erro geralmente significa que você deixou de inserir um ponto e vírgula ao final de uma de suas linhas de código, mas algumas vezes pode ser mais crítico. Por exemplo, se mudarmos essa linha (número 58) dentro da função <code>conferirPalpite()</code>:</p>

<pre class="brush: js">var palpiteUsuario = Number(campoPalpite.value);</pre>

<p>para</p>

<pre class="brush: js">var palpiteUsuario === Number(campoPalpite.value);</pre>

<p>Exibe esse erro porque pensa que você está fazendo algo diferente. Você deve se certificar de não misturar o operador de atribuição (<code>=</code>) — que configura uma variável para ser igual a determinado valor — com o operador de igualdade restrita (<code>===</code>), que testa se um valor é exatamente igual a outro, e retorna um resultado <code>true</code>/<code>false</code> (verdadeiro ou falso).</p>

<div class="note">
<p><strong>Nota</strong>: Veja nossa página de referência <a href="/pt-BR/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> para mais detalhes sobre esse erro.</p>
</div>

<h3 id="O_programa_sempre_diz_que_você_ganhou_independentemente_do_palpite_que_insira">O programa sempre diz que você ganhou, independentemente do palpite que insira</h3>

<p>Isso pode ser outro sintoma de confusão entre o operador de atribuição e o operador de igualdade restrita. Por exemplo, se nós quiséssemos essa linha dentro de <code>conferirPalpite()</code>:</p>

<pre class="brush: js">if (palpiteUsuario === numeroAleatorio) {</pre>

<p>para</p>

<pre class="brush: js">if (palpiteUsuario = numeroAleatorio) {</pre>

<p>o teste retornaria sempre <code>true</code> (verdadeiro), causando o programa a reportar que o jogo foi vencido. Tome cuidado!</p>

<h3 id="SyntaxError_missing_after_argument_list"><em>SyntaxError: missing ) after argument list</em></h3>

<p>Erro de sintaxe: faltando ")" depois de listar uma declaração. Esse é bem simples — geralmente significa que deixamos de fechar o parênteses no final ao invocar uma função/método.</p>

<div class="note">
<p><strong>Nota</strong>: Veja nossa página de referência <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> para mais detalhes sobre o erro.</p>
</div>

<h3 id="SyntaxError_missing_after_property_id"><em>SyntaxError: missing : after property id</em></h3>

<p>Erro de sintaxe: faltando ":" depois da propriedade id. Esse erro geralmente se relaciona à formação incorreta de um objeto de JavaScript, mas nesse caso o obtivemos alterando:</p>

<pre class="brush: js">function conferirPalpite() {</pre>

<p>para</p>

<pre class="brush: js">function conferirPalpite( {</pre>

<p>Isso levou o navegador a pensar que estávamos tentando passar todo o conteúdo da função como se fosse um argumento dessa função. Seja cuidadoso com esses parênteses!</p>

<h3 id="SyntaxError_missing_after_function_body"><em>SyntaxError: missing } after function body</em></h3>

<p>Erro de sintaxe: faltando "}" depois do corpo da função. Isso é fácil — geralmente significa que você deixou de colocar uma das chaves de uma função ou de uma estrutura condicional. Nós obtemos esse erro deletando uma das chaves de fechamento próximas ao final da função <code>conferirPalpite()</code>.</p>

<h3 id="SyntaxError_expected_expression_got_string_ou_SyntaxError_unterminated_string_literal"><em>SyntaxError: expected expression, got 'string' </em>ou <em>SyntaxError: unterminated string literal</em></h3>

<p>Erro de sintaxe: esperado uma expressão, obtido uma 'string' e Erro de sintaxe: string literal não terminada. Esses erros geralmente significam que você deixou de colocar aspas no início ou no final da declaração de uma cadeia de texto. No primeiro erro acima, '<em>string'</em> seria substituído pelo(s) caractere(s) encontrado(s) pelo navegador ao invés da aspa no início de uma cadeia de texto. O segundo erro quer dizer que a cadeia de texto não foi finalizada com o caractere de aspa.</p>

<p>Para todos esses erros, pense em como nós abordamos os exemplos em que olhamos no passo a passo. Quando um erro surge, olha o número da linha que é informado, vá até essa linha e veja se consegue localizar o que há de errado. Mantenha em mente que o erro não estará necessariamente nessa linha, e também que o erro pode não ter sido causado exatamente  pelo mesmo problema que citamos acima!</p>

<div class="note">
<p><strong>Nota</strong>: Veja nossas páginas de referência <a href="/pt-BR/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> e <a href="/pt-BR/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> para mais detalhes sobre esses erros.</p>
</div>

<h2 id="Sumário">Sumário</h2>

<p>Então aqui temos, o básico de como resolver erros em programas simples de JavaScript. Não será sempre tão fácil de solucionar o que está errado em seu código, mas pelo menos isso irá te poupar algumas horas de sono e lhe permitir progredir um pouco mais rápido quando as coisas não saírem certas no início da sua jornada de aprendizado.</p>

<h2 id="Veja_também">Veja também</h2>

<div>
<ul>
 <li>Há muitos outros tipos de erros que não listamos aqui; estamos compilando uma referência que explica o que eles significam em detalhes — veja a <a href="/pt-BR/docs/Web/JavaScript/Reference/Errors">referência de erros do JavaScript</a>.</li>
 <li>Se você se deparar com qualquer erro em seu código que não tenha certeza de como resolver mesmo depois de ler este artigo, você pode pedir ajuda! Pergunte na <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Área de Discussão e Aprendizagem</a>, ou no canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> em <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Nos diga quel é o seu erro, e nós iremos tentar te ajudar. Uma amostra do seu código também seria útil.</li>
</ul>
</div>

<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p>