Tic Tac Toe why is the script not working

Question

Im trying to write a tic tac toe game with javascript and there is a mistake in the code that doesn't get displayed in the console can someone please tell me what is wrong with the script.

var box = document.getElementById("box");
var subBox = document.getElementsByClassName("subBox");
var num = 0;

function turn() {

  if (num % 2 == 0) {
    document.subBox.this.innerHTML = "X";
    num++;
  } else if (num % 2 == 1) {
    document.subBox.this.innerHTML = "O";
    num++;
  }

}

for (i = 0; subBox.length < i; i++) {
  subBox[i].addEventListener('click', turn());
}

document.subBox.this.innerHTML="X"; <-- that is also wrong.... not sure where you learned to stick "this" inside. That is looking for an element named `name="this"` — epascarello, Sep 02 '20 at 18:44
https://stackoverflow.com/questions/16258892/javascript-onclick-happening-on-page-load for the click issue — epascarello, Sep 02 '20 at 18:45

score 0 · Accepted Answer · answered Sep 02 '20 at 19:01

You had a bunch of small problems preventing you from making your code work. First you are not looping correctly over your for loop. The logic was reversed so the loop was not running. The first iteration the if check was checking to see if 9 < 0. That is false so the events were never assigned.

You were calling click instead of assigning a reference to the element in the event listener.

Thirdly you were using the this reference wrong to get the element that was clicked to alter the text of the cell.

Below is the code with those issue corrected.

var subBox = document.getElementsByClassName("subBox");
var num = 0;

function turn() { 
  
  // reference element with this
  console.log(this);

  if (this.innerHTML.length) {
    return;
  } else if (num % 2 == 0) {
    this.innerHTML = "X";
  } else {
    this.innerHTML = "O";
  }
  num++;
}

// for loop was wrong
for (i = 0; i < subBox.length; i++) {
  // you assign turn, you do not execute it
  subBox[i].addEventListener('click', turn);
}

div.box {
  display: grid;
  grid-template-columns: repeat(3, 100px);
   grid-gap: 0px;
}

div.subBox {
  line-height: 100px;
  font-size: 30px;
  text-align: center;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

<div class="box">
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
</div>

score -1 · Answer 2 · edited Sep 02 '20 at 18:53

-1

You haven’t posted the data structure. What kind of element is subBox?

This line doesn’t look good either way…

document.subBox.this.innerHTML="X";

It should be…

subBox.innerHTML="X";

But if it’s a two-dimensional array then it should go…

subBox[x][y].innerHTML="X";

Needless to say that a one-dimension array should be...

subBox[x].innerHTML="X";

edited Sep 02 '20 at 18:53

Dharman

30,962
25
85
135

answered Sep 02 '20 at 18:47

user4723924

1

How can a live HTML Collection be a 2D array? `subBox` is defined right there in the code. – epascarello Sep 02 '20 at 18:48
From what he posted that cannot be determined. Give yourself a -1 for me. Thanks. – user4723924 Sep 02 '20 at 18:50
So you are saying `var subBox = document.getElementsByClassName("subBox");` is not there? So yes it can be determined. – epascarello Sep 02 '20 at 18:51
That's just any old element with a class! Big deal... please run along. Thanks. – user4723924 Sep 02 '20 at 18:52
You stated it was not defined. So I was pointing out the error. And there were 3 major things wrong with the code. – epascarello Sep 02 '20 at 19:02

Tic Tac Toe why is the script not working

2 Answers2