How do i add the number of guesses into my game? Javascript

I simplified your code, added numberOfClicks and colNames as a global variables (outside any methods so all methods can use them).

I also removed the id attribut on each cell, and instead added two data-* attributes: data-row and data-col. So now you can get the row and column indexes of each clicked cell, through el.dataset.row and el.dataset.col.

I removed all classes on the table cells, because th means “table header” which should mark all the … well .. headers.

I changed so that you don’t change the background style, but instead add a .green or .red class.

I didn’t solve the question for you, but I gave you the tools so you can fill in the rest. Clicking on a cell calls tableText() method that checks if it’s the correct cell, otherwise tableText() will call a giveHint() method.

Add numberOfClicks++ to the correct method, and fill out giveHint() with code of your own.

If you want to reset the game, use a gameReset() method.

You should have created the whole table with javascript, instead of HTML, but that’s beyond your knowledge for now. That would make it a lot easier to reset the table again, ie remove all classes from the cells.

let rowIndex, colIndex, numberOfClicks;
const colNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];

function tableText(color) {
  if (typeof event !== 'undefined') {
    el = event.srcElement;
    let clickedRow = el.dataset.row;
    let clickedCol = el.dataset.col;
    if (reachedWinCondition(clickedRow, clickedCol)) {
    } else {
      giveHint(clickedRow, clickedCol);

function triggerWinCondition(el) {
  alert("you found it");

function reachedWinCondition(clickedRow, clickedCol) {
  return clickedRow == rowIndex && clickedCol == colIndex;

function giveHint(clickedRow, clickedCol) {
  // do something with clickedRow, clickedCol, rowIndex, colIndex
  console.log({clickedRow}, {clickedCol})

function gameReset() {
  numberOfClicks = 0;

function randomizeHurklesHidingSpot() {
  colIndex = Math.floor(Math.random() * 8) + 1;
  rowIndex = Math.floor(Math.random() * 8) + 1;
  console.log('col:' + colNames[colIndex - 1], 'row:' + rowIndex);

body {
  text-align: center;
  background-image: url('');

td {
  border: 0px solid white;
  border-collapse: collapse;
  width: 45%;
  height: 55px;
  text-align: center;
  vertical-align: center;
  table-layout: fixed;
} {
  margin-left: auto;
  margin-right: auto;

th {
  border: 0px solid white;
  font-weight: normal;

td {
  background-color: rgb(252, 142, 215);
  border: 2px solid black;
} {
  background-color: red;
} {
  background-color: lightgreen;

td:hover {
  background-color: rgb(255, 230, 0);

.button {
  padding: 5px;
  background-color: #dcdcdc;
  border: 1px solid #666;
  color: #000;
  margin-top: 10px;

button:hover {
  color: yellow;
<div id="Table">
  <div id='playerName'></div>
  <p> Click a Cell to Find Hurkles</p>
    <table id="tableID" class="center">
        <td data-row="1" data-col="1" onclick="tableText('red')"></td>
        <td data-row="1" data-col="2" onclick="tableText('red')"></td>
        <td data-row="1" data-col="3" onclick="tableText('red')"></td>
        <td data-row="1" data-col="4" onclick="tableText('red')"></td>
        <td data-row="1" data-col="5" onclick="tableText('red')"></td>
        <td data-row="1" data-col="6" onclick="tableText('red')"></td>
        <td data-row="1" data-col="7" onclick="tableText('red')"></td>
        <td data-row="1" data-col="8" onclick="tableText('red')"></td>
        <td data-row="1" data-col="9" onclick="tableText('red')"></td>
        <td data-row="1" data-col="10" onclick="tableText('red')"></td>
        <td data-row="2" data-col="1" onclick="tableText('red')"></td>
        <td data-row="2" data-col="2" onclick="tableText('red')"></td>
        <td data-row="2" data-col="3" onclick="tableText('red')"></td>
        <td data-row="2" data-col="4" onclick="tableText('red')"></td>
        <td data-row="2" data-col="5" onclick="tableText('red')"></td>
        <td data-row="2" data-col="6" onclick="tableText('red')"></td>
        <td data-row="2" data-col="7" onclick="tableText('red')"></td>
        <td data-row="2" data-col="8" onclick="tableText('red')"></td>
        <td data-row="2" data-col="9" onclick="tableText('red')"></td>
        <td data-row="2" data-col="10" onclick="tableText('red')"></td>
        <td data-row="3" data-col="1" onclick="tableText('red')"></td>
        <td data-row="3" data-col="2" onclick="tableText('red')"></td>
        <td data-row="3" data-col="3" onclick="tableText('red')"></td>
        <td data-row="3" data-col="4" onclick="tableText('red')"></td>
        <td data-row="3" data-col="5" onclick="tableText('red')"></td>
        <td data-row="3" data-col="6" onclick="tableText('red')"></td>
        <td data-row="3" data-col="7" onclick="tableText('red')"></td>
        <td data-row="3" data-col="8" onclick="tableText('red')"></td>
        <td data-row="3" data-col="9" onclick="tableText('red')"></td>
        <td data-row="3" data-col="10" onclick="tableText('red')"></td>
        <td data-row="4" data-col="1" onclick="tableText('red')"></td>
        <td data-row="4" data-col="2" onclick="tableText('red')"></td>
        <td data-row="4" data-col="3" onclick="tableText('red')"></td>
        <td data-row="4" data-col="4" onclick="tableText('red')"></td>
        <td data-row="4" data-col="5" onclick="tableText('red')"></td>
        <td data-row="4" data-col="6" onclick="tableText('red')"></td>
        <td data-row="4" data-col="7" onclick="tableText('red')"></td>
        <td data-row="4" data-col="8" onclick="tableText('red')"></td>
        <td data-row="4" data-col="9" onclick="tableText('red')"></td>
        <td data-row="4" data-col="10" onclick="tableText('red')"></td>
        <td data-row="5" data-col="1" onclick="tableText('red')"></td>
        <td data-row="5" data-col="2" onclick="tableText('red')"></td>
        <td data-row="5" data-col="3" onclick="tableText('red')"></td>
        <td data-row="5" data-col="4" onclick="tableText('red')"></td>
        <td data-row="5" data-col="5" onclick="tableText('red')"></td>
        <td data-row="5" data-col="6" onclick="tableText('red')"></td>
        <td data-row="5" data-col="7" onclick="tableText('red')"></td>
        <td data-row="5" data-col="8" onclick="tableText('red')"></td>
        <td data-row="5" data-col="9" onclick="tableText('red')"></td>
        <td data-row="5" data-col="10" onclick="tableText('red')"></td>
        <td data-row="6" data-col="1" onclick="tableText('red')"></td>
        <td data-row="6" data-col="2" onclick="tableText('red')"></td>
        <td data-row="6" data-col="3" onclick="tableText('red')"></td>
        <td data-row="6" data-col="4" onclick="tableText('red')"></td>
        <td data-row="6" data-col="5" onclick="tableText('red')"></td>
        <td data-row="6" data-col="6" onclick="tableText('red')"></td>
        <td data-row="6" data-col="7" onclick="tableText('red')"></td>
        <td data-row="6" data-col="8" onclick="tableText('red')"></td>
        <td data-row="6" data-col="9" onclick="tableText('red')"></td>
        <td data-row="6" data-col="10" onclick="tableText('red')"></td>
        <td data-row="7" data-col="1" onclick="tableText('red')"></td>
        <td data-row="7" data-col="2" onclick="tableText('red')"></td>
        <td data-row="7" data-col="3" onclick="tableText('red')"></td>
        <td data-row="7" data-col="4" onclick="tableText('red')"></td>
        <td data-row="7" data-col="5" onclick="tableText('red')"></td>
        <td data-row="7" data-col="6" onclick="tableText('red')"></td>
        <td data-row="7" data-col="7" onclick="tableText('red')"></td>
        <td data-row="7" data-col="8" onclick="tableText('red')"></td>
        <td data-row="7" data-col="9" onclick="tableText('red')"></td>
        <td data-row="7" data-col="10" onclick="tableText('red')"></td>
        <td data-row="8" data-col="1" onclick="tableText('red')"></td>
        <td data-row="8" data-col="2" onclick="tableText('red')"></td>
        <td data-row="8" data-col="3" onclick="tableText('red')"></td>
        <td data-row="8" data-col="4" onclick="tableText('red')"></td>
        <td data-row="8" data-col="5" onclick="tableText('red')"></td>
        <td data-row="8" data-col="6" onclick="tableText('red')"></td>
        <td data-row="8" data-col="7" onclick="tableText('red')"></td>
        <td data-row="8" data-col="8" onclick="tableText('red')"></td>
        <td data-row="8" data-col="9" onclick="tableText('red')"></td>
        <td data-row="8" data-col="10" onclick="tableText('red')"></td>
        <td data-row="9" data-col="1" onclick="tableText('red')"></td>
        <td data-row="9" data-col="2" onclick="tableText('red')"></td>
        <td data-row="9" data-col="3" onclick="tableText('red')"></td>
        <td data-row="9" data-col="4" onclick="tableText('red')"></td>
        <td data-row="9" data-col="5" onclick="tableText('red')"></td>
        <td data-row="9" data-col="6" onclick="tableText('red')"></td>
        <td data-row="9" data-col="7" onclick="tableText('red')"></td>
        <td data-row="9" data-col="8" onclick="tableText('red')"></td>
        <td data-row="9" data-col="9" onclick="tableText('red')"></td>
        <td data-row="9" data-col="10" onclick="tableText('red')"></td>
        <td data-row="10" data-col="1" onclick="tableText('red')"></td>
        <td data-row="10" data-col="2" onclick="tableText('red')"></td>
        <td data-row="10" data-col="3" onclick="tableText('red')"></td>
        <td data-row="10" data-col="4" onclick="tableText('red')"></td>
        <td data-row="10" data-col="5" onclick="tableText('red')"></td>
        <td data-row="10" data-col="6" onclick="tableText('red')"></td>
        <td data-row="10" data-col="7" onclick="tableText('red')"></td>
        <td data-row="10" data-col="8" onclick="tableText('red')"></td>
        <td data-row="10" data-col="9" onclick="tableText('red')"></td>
        <td data-row="10" data-col="10" onclick="tableText('red')"></td>



Leave a Comment