title: JS Class property "is undefined" even tho it appears to be defined
body: <p>I'm quite new to JS and I'm trying to do a TicTacToe game with a custom size board in an attempt to learn a bit more. I first coded just a 3x3 version and started building up from there.</p>
  <p>Right as I got past the point where I have a custom grid size entered right after loading the page and the grid rendering, I started getting the same problem when trying to click any cell to try and play a turn.</p>
  <blockquote>
  <p>&quot;this.game_state[clicked_cell_i] is undefined&quot;.</p>
  </blockquote>
  <p>I have tried opening up F12 and checking if the game_state array (which is a 2d array of strings that tracks which cell is played and which isn't) but when I do everything seems normal and the array gets printed out without problem. (picture showcases printing out the game_state array in a 4x4 grid) <a href="https://i.stack.imgur.com/gV0pY.png" rel="nofollow noreferrer">https://i.stack.imgur.com/gV0pY.png</a></p>
  <p>I would really appreciate it if somebody could explain to me what's happening or even better - help me fix it. Thanks :)</p>
  <p>Code: <a href="https://jsfiddle.net/z8649pxL" rel="nofollow noreferrer">https://jsfiddle.net/z8649pxL</a></p>
  <pre><code>
  class game {
      status_display;
      is_game_active;
      curr_player;
      game_state;
  
      constructor() {
          this.status_display = document.querySelector('.status');
          this.is_game_active = true;
          this.curr_player = &quot;X&quot;;
          this.game_state = matrix(rows, rows, &quot;&quot;);
      }
  
      cell_played(clicked_cell, clicked_cell_i, clicked_cell_j){
          this.game_state[clicked_cell_i][clicked_cell_j] = this.curr_player;
          clicked_cell.innerHTML = this.curr_player;
          if(this.curr_player === &quot;X&quot;){
              document.getElementById((i*rows)+j).style.backgroundColor = &quot;#ff6600&quot;;
          } else if(this.curr_player === &quot;O&quot;){
              document.getElementById((i*rows)+j).style.backgroundColor = &quot;#33ccff&quot;;
          }
      }
  
      cell_click(clicked_cellEvent){
          debugger
          const clicked_cell = clicked_cellEvent.target;
          let clicked_cell_i = parseInt(clicked_cell.getAttribute('i'));
          let clicked_cell_j = parseInt(clicked_cell.getAttribute('j'));
          if(this.game_state[clicked_cell_i][clicked_cell_j] !== &quot;&quot; || !this.is_game_active) {
              return;
          }
          this.cell_played(clicked_cell, clicked_cell_i, clicked_cell_j);
          this.res_validation();
      }
  };
  
  let ex_game = new game();
  
  function create_grid() {
      document.getElementById('hidestart').style.display = &quot;none&quot;;
      var Container = document.getElementsByClassName(&quot;grid&quot;);
      Container.innerHTML = '';
      
      rows = prompt(&quot;n?&quot;);
      let i = 0, j = 0;
        
      document.documentElement.style.setProperty(&quot;--columns-row&quot;, rows);
      for (i = 0; i &lt; rows ; i++) {
          for(j = 0; j &lt; rows; j++){
              var div = document.createElement(&quot;div&quot;);
              div.className = &quot;cell&quot;;
              div.id = (i*rows)+j;
              div.setAttribute(&quot;cell-index&quot;, (i*rows)+j);
              div.setAttribute(&quot;i&quot;, i);
              div.setAttribute(&quot;j&quot;, j);
              let wrapper = document.getElementsByClassName(&quot;grid&quot;);
              wrapper[0].appendChild(div);
          }
      }
      document.querySelectorAll('.cell').forEach(cell =&gt; cell.addEventListener('click', (e) =&gt; {
          ex_game.cell_click(e);
          e.stopPropagation();
      }));
      document.getElementById('hidestart').style.display = &quot;block&quot;;
  }
  
  function matrix(rows, cols, defaultValue){
      var arr = [];
      // Creates all lines:
      for(var i=0; i &lt; rows; i++){
          // Creates an empty line
          arr.push([]);
          // Adds cols to the empty line:
          arr[i].push(new Array(cols));
          for(var j=0; j &lt; cols; j++){
            // Initializes:
            arr[i][j] = defaultValue;
          }
      }
      return arr;
  }```
  </code></pre>