Old-fashioned logic error in Javascript?

Asked

Viewed 96 times

0

I am learning Javascript and want to make an old game to train. The game is not working and I think it may be a logic error.

  

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>

javascript
  • 8

    First, syntax error. It’s onclick, nay onlick (nobody wants to lick anyone here, either? ), missed one c in all its elements. Second, logic error, you assign X/Y to teste which is a local variable in the function, but this will not change your element. You need to do something like document.getElementById...innerHTML = teste

  • Even with Anderson’s hints your code will not work as expected. After it leaves the if for the first time will always remain in Else.

1 answer

2

Correcting only what you’ve assembled.

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>

First, as pointed out by Anderson, you wrote "onlick" instead of onclick. I also made your code a little simpler by taking out the this.id and replacing by only this that will pass the entire div to function, then just refer to it per element without having to do any kind of query by DOM. Another thing pointed out by Anderson in the comments is that you were modifying the value of the variable and not the innerHTML of the element, so it was not going as wanted.

There are more problems in this game to be really an old game, for example, when clicking on a square already with X it becomes Y, but does not return to X if clicked again, besides that the game should not allow anyone to click on an already busy square. Validation also needs to be done if the person won, lost, or was drawn.

  • "(...)you were modifying the value of the variable and not the innerHTML of the element". I just didn’t get that part, man. The variable is equal to innerHTML, so the value of innerHTML should not be modified either?

  • No. The variable TOOK the value that was in innerHTML and placed it inside it. It’s the same thing that you do two variables, equal the second variable with the first, and then modify the second. The first won’t change, only the second.

  • I’ll make it a little easier for you to understand. var teste = document.getElementById('id'); the variable will point to the element. If you do var teste = document.getElementById('id').innerHTML; the method innerHTML will return a value that is in the element, will not return the element. In this case, the variable only has an empty string value (in your case).

  • 1

    @Luizantônio about this doubt, I recommend you read about copy assignment and attribution by reference. Understanding the difference between them will understand why the modifications in the variable are not reflected in the element.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.