0

Estou aprendendo JavaScript e quero fazer um jogo da velha para treinar.O jogo não está funcionando e creio que possa ser um erro de lógica.

  

function verificar(elemento) {
  var teste = document.getElementById(elemento).innerHTML;

  if (teste == "") {
    teste = "X";
  } else {
    teste = "Y";
  }
}
.container {
  max-width: 130px;
}

.tab {
  float: left;
  height: 30px;
  width: 30px;
  border: solid green 2px;
}
<div class="container">
  <div class="tab" id="q1" onlick="verificar(this.id);"></div>
  <div class="tab" id="q2" onlick="verificar(this.id);"></div>
  <div class="tab" id="q3" onlick="verificar(this.id);"></div>
  <div class="tab" id="q4" onlick="verificar(this.id);"></div>
  <div class="tab" id="q5" onlick="verificar(this.id);"></div>
  <div class="tab" id="q6" onlick="verificar(this.id);"></div>
  <div class="tab" id="q7" onlick="verificar(this.id);"></div>
  <div class="tab" id="q8" onlick="verificar(this.id);"></div>
  <div class="tab" id="q9" onlick="verificar(this.id);"></div>
</div>

2
  • 8
    Primeiro, erro de sintaxe. É onclick, não onlick (ninguém quer lamber ninguém aqui, quer?), faltou um c em todos os seus elementos. Segundo, erro de lógica, você atribui X/Y para teste que é uma variável local na função, mas isso não vai alterar o seu elemento. Você precisa fazer algo como document.getElementById...innerHTML = teste
    – Woss
    Commented 12/12/2018 às 11:51
  • Mesmo com as dicas do Anderson seu código não vai funcionar como espera. Depois que ele sair do if pela primeira vez permanecerá sempre no else.
    – LeAndrade
    Commented 12/12/2018 às 11:59

1 Resposta 1

2

Corrigindo apenas o que você já montou.

function verificar(elemento) {
  if(elemento.innerHTML == "") {
    elemento.innerHTML = "X";
  } else {
    elemento.innerHTML = "Y";
  }
}
.container {
  max-width: 130px;
}

.tab {
  float: left;
  height: 30px;
  width: 30px;
  border: solid green 2px;
}
<div class="container">
  <div class="tab" id="q1" onclick="verificar(this);"></div>
  <div class="tab" id="q2" onclick="verificar(this);"></div>
  <div class="tab" id="q3" onclick="verificar(this);"></div>
  <div class="tab" id="q4" onclick="verificar(this);"></div>
  <div class="tab" id="q5" onclick="verificar(this);"></div>
  <div class="tab" id="q6" onclick="verificar(this);"></div>
  <div class="tab" id="q7" onclick="verificar(this);"></div>
  <div class="tab" id="q8" onclick="verificar(this);"></div>
  <div class="tab" id="q9" onclick="verificar(this);"></div>
</div>

Primeiro, como apontado pelo Anderson, você escreveu "onlick" ao invés de onclick. Também deixei seu código um pouco mais simples tirando o this.id e substituindo por apenas this que irá passar a div inteira pra função, ai é só se referir a ela por elemento sem ter que fazer nenhum tipo de query pelo DOM. Outra coisa apontada pelo Anderson nos comentários é que você estava modificando o valor da variável e não do innerHTML do elemento, por isso não estava saindo como queria.

Existem mais problemas nesse jogo para ser realmente um jogo da velha, como por exemplo, ao clicar num quadrado já com X ele se torna Y, mas não retorna para X se clicado de novo, fora que o jogo não deveria permitir que alguém clicasse num quadrado já ocupado. Também precisa ser feita a validação se a pessoa ganhou, perdeu, ou se deu empate.

4
  • "(...)você estava modificando o valor da variável e não do innerHTML do elemento".Eu só não entendi essa parte,cara.A variável é igual ao innerHTML,portanto o valor do innerHTML não deveria ser modificado também? Commented 12/12/2018 às 12:16
  • Não. A variável PEGOU o valor que estava no innerHTML e colocou dentro dela. É a mesma coisa que você fazer duas variáveis, igualar a segunda variável com a primeira, e ai modificar a segunda. A primeira não vai mudar, só a segunda. Commented 12/12/2018 às 12:20
  • Vou deixar um pouco mais fácil pra você entender. Se você fizer var teste = document.getElementById('id'); a variável vai apontar pro elemento. Se você fizer var teste = document.getElementById('id').innerHTML; o método innerHTML irá retornar um valor que está no elemento, não irá te retornar o elemento. Nesse caso, a variável só tem um valor de string vazia (no seu caso). Commented 12/12/2018 às 12:26
  • 1
    @LuizAntônio sobre essa sua dúvida, recomendo que leia sobre atribuição por cópia e atribuição por referência. Entendendo a diferença entre elas entenderá porque as modificações na variável não são refletidas no elemento.
    – Woss
    Commented 12/12/2018 às 12:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .