Skip to content
Advertisement

Javascript & HTML – tokens not appearing on connect four board

I’m creating a connect four game using javascript, html, and css, and I’m having trouble with my refreshGrid() function in game.js. Running my html file is currently just an empty board, and this function is supposed to make it so that when the user clicks on an empty space on the board, a chip appears. I’m not sure why this function isn’t working, and would appreciate some help. I’m not sure if I’m iterating through my rows and columns correctly.

var player=1; 
var grid = [
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0]
];

function selectColumn(col) {
  if(player==1){
    grid[5][col]=1;
    player=2;
    document.getElementById("box1").innerHTML="Player 1's Turn";
  }else{
    grid[5][col]=2;
    player=1;
    document.getElementById("box1").innerHTML="Player 2's Turn";
  }
  refreshGrid();
}

function refreshGrid() {
  for (var row = 0; row < 6; row++) {
    for (var col = 0; col < 7; col++) {
      if (grid[row][col]==0) { 
                document.getElementById("cell"+row+col).style.backgroundColor="#FFFFFF";
      } else if (grid[row][col]==1) { //1 for yellow
                document.getElementById("cell"+row+col).style.backgroundColor="#FFFF00";
      } else if (grid[row][col]==2) { //1 for yellow
                document.getElementById("cell"+row+col).style.backgroundColor="#FF0000";
       }
    }
  }  
}
<div id="box1"><h1>Player 2's turn.</h1></div>
<div id="grid">
  <div class="column" id="column-0" data-x="0">
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
  </div>
  <div class="column" id="column-1" data-x="1">
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
  </div>
  <div class="column" id="column-2" data-x="2">
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
  </div>
  <div class="column" id="column-3" data-x="3">
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
  </div>
  <div class="column" id="column-4" data-x="4">
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
  </div>
  <div class="column" id="column-5" data-x="5">
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
  </div>
  <div class="column" id="column-6" data-x="6">
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
    <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>
  </div>
</div>

Advertisement

Answer

There are too many things wrong in your code. I don’t even know where to start, I will edit this post with things I remember and tips.

var player=1; 
var grid = [
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0]
];

function selectColumn(col) {
  for (let row = 0; row < 7; ++row) {
    if(grid[row][6-col]){
      continue;
    }
    if(player==1){
      grid[row][6-col]=1;
      player=2;
      document.getElementById("box1").innerHTML="Player 1's Turn";
    }else{
      grid[row][6-col]=2;
      player=1;
      document.getElementById("box1").innerHTML="Player 2's Turn";
    }
    break;
  }
  refreshGrid();
}

function refreshGrid() {
  for (var row = 0; row < 6; row++) {
    for (var col = 0; col < 7; col++) {
      const htmlElement = document.querySelector(`#column-${6-col} .row-${row}`);
      if (grid[row][col]==0) { 
                htmlElement.style.backgroundColor="#FFFFFF";
      } else if (grid[row][col]==1) { //1 for yellow
                htmlElement.style.backgroundColor="#FFFF00";
      } else if (grid[row][col]==2) { //1 for yellow
                htmlElement.style.backgroundColor="#FF0000";
       }
    }
  }  
}
.column {
  display: grid;
  grid-auto-flow: row;
}

#grid {
  display: grid;
  grid-auto-flow: column;
}
<div id="box1"><h1>Player 2's turn.</h1></div>
<div id="grid">
    <div class="column" id="column-0" data-x="0">
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(0)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
    </div>
    <div class="column"  id="column-1" data-x="1">
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(1)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
    </div>
    <div class="column" id="column-2" data-x="2">
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(2)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>  
    </div>
    <div class="column" id="column-3" data-x="3">
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(3)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
    </div>
    <div class="column" id="column-4" data-x="4">
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(4)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
    </div>
    <div class="column" id="column-5" data-x="5">
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(5)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg>  
    </div>
    <div class="column" id="column-6" data-x="6">
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(6)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(6)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(6)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(6)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(6)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(6)">
          <circle cx="45" cy="45" r="30"   class="free" />
        </svg> 
    </div>
</div>
    <script src="game.js"></script>
</div>

Your code is really messy and your question is not focused enough. The only reason I did it was because the idea was fun and I wanted to see it working.

Things I remember:

Your columns and rows were (and still are) inverted in your html structure. You have rows of cells in your script and columns of cells in your html.

You were calling (selectColumn with 0, 1, 2, 3, 4, …) inside the same column…

Don’t use magic numbers (raw numbers like 6 or 7), use constants instead. You can define NUMBER_OF_ROWS and NUMBER_OF_COLUMNS. Same things for strings.

You can generate an array with javascript and create your html elements using that array.

You were trying to acces a board variable which doesn’t exist.

You were trying to select your cell by id when there were no id defined with row and columns.

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement