Unable to see the tokens on the connect four board when using Javascript and HTML

Question

Unable to see the tokens on the connect four board when using Javascript and HTML

I'm currently developing a game of connect four using javascript, html, and css. I'm encountering an issue with the refreshGrid() function in game.js. At the moment, when I run my html file, I only see an empty board. The function is meant to enable a chip to appear on the board when a user clicks on an empty space. I'm unsure why this function isn't functioning correctly and would appreciate any assistance. I suspect there may be an issue with how I'm iterating through the rows and columns.

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>
    ...
    ...
    ...
  </div>
  ...
  ...
  ...
</div>

javascript html css arrays function

Answer 1

Answer №1

Your code needs some significant improvements. I will provide some suggestions and tips to help you rectify the issues.

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> 
        ... //rest of the SVG elements
    </div>
    ... //rest of the columns
</div>
    <script src="game.js"></script>
</div>

Your code lacks organization and clarity. I took the liberty to improve it because I found the concept interesting and wanted to see it in action.

Key points to note:

Your HTML structure had inverted columns and rows, causing confusion.

You were calling the selectColumn function with the same index inside the same column.

Avoid using magic numbers; define constants for values like the number of rows and columns.

You can generate an array with JavaScript and dynamically create HTML elements based on that array.

You were referencing a non-existent board variable in your code.

Ensure to properly define IDs for rows and columns when selecting elements in your script.

Answer 2

Your code needs some significant improvements. I will provide some suggestions and tips to help you rectify the issues.

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> 
        ... //rest of the SVG elements
    </div>
    ... //rest of the columns
</div>
    <script src="game.js"></script>
</div>

Your code lacks organization and clarity. I took the liberty to improve it because I found the concept interesting and wanted to see it in action.

Key points to note:

Your HTML structure had inverted columns and rows, causing confusion.

You were calling the selectColumn function with the same index inside the same column.

Avoid using magic numbers; define constants for values like the number of rows and columns.

You can generate an array with JavaScript and dynamically create HTML elements based on that array.

You were referencing a non-existent board variable in your code.

Ensure to properly define IDs for rows and columns when selecting elements in your script.

Unable to see the tokens on the connect four board when using Javascript and HTML

Answer №1

Similar questions

It can be frustrating to have to refresh the page twice in order to see changes when utilizing the revalidate feature in Next

Using Selenium with Python to extract text from an element excluding any text within its nested tags

Convert a single object into a JSON string representation on each line

2-panel accordion interface

What exactly are Node.js core files?

Manipulation of CSS DOM elements for achieving responsive design

Discovering the Authentic Page upon Completion of Load using PhantomJS

How can you efficiently manage Access & Refresh tokens from various Providers?

Implementing automatic line breaks in Bootstrap

Calculate the occurrences of numbers within a string in an array of objects containing a specific string each time an object is removed

"Problem with the Hide/Show Load feature: it's not functioning

Eliminating fillers dashes from a text

Make a request to the local API in a React Native mobile app by sending a GET request

Shader material for border and overlay effects in THREE.js

My mongoose sort function doesn't seem to be functioning properly. What could be the issue?

Troubleshooting problems with CSS menus and submenus, along with addressing browser pixel issues specific to Web

Struggling to eliminate excess white space on my site

Including an Authorization header with a GET request is crucial for accessing protected

jQuery Mishap - Creating an Unspecified Issue

Adjusting the devicePixelRatio in Three.js to optimize rendering with CSS3DRenderer