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)) {
      triggerWinCondition(el);
    } else {
      el.classList.add(color);      
      giveHint(clickedRow, clickedCol);
    }
  }
} 

function triggerWinCondition(el) {
  el.classList.add('green');
  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;
  randomizeHurklesHidingSpot();
}

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

gameReset();
body {
  text-align: center;
  background-image: url('https://storage.pixteller.com/designs/designs-images/2019-03-27/05/simple-background-backgrounds-passion-simple-1-5c9b95bd34713.png');
}

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

table.center {
  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;
}

td.red {
  background-color: red;
}

td.green {
  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>
  <h2>Hurkles</h2>
  <p> Click a Cell to Find Hurkles</p>
    <table id="tableID" class="center">
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
        <th>G</th>
        <th>H</th>
        <th>I</th>
        <th>J</th>
      </tr>
      <tr>
        <th>1</th>
        <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>
      </tr>
      <tr>
        <th>2</th>
        <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>
      </tr>
      <tr>
        <th>3</th>
        <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>
      </tr>
      <tr>
        <th>4</th>
        <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>
      </tr>
      <tr>
        <th>5</th>
        <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>
      </tr>
      <tr>
        <th>6</th>
        <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>
      </tr>
      <tr>
        <th>7</th>
        <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>
      </tr>
      <tr>
        <th>8</th>
        <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>
      </tr>
      <tr>
        <th>9</th>
        <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>
      </tr>
      <tr>
        <th>10</th>
        <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>
      </tr>

    </table>

</div>

Leave a Comment