如何将猜测次数添加到我的游戏中？ Javascript

Question

I am new to coding and have had alot of help with this project. I have to make a game for a school project. The game is simple, you just have to pick the right cell in the table, what i dont understand is how i would be able to count the number of guesses the player takes. I also have another problem where i so not understand how i would be able to alert the player a direction when they pick the wrong cell, for example if they chose the wrong cell an alert would come up and tell them north or something like that. My code is here if you would like to look at it.

 Table.style.display = "none"; MainMenu.style.display = "block"; var name = ''; function Start() { Table.style.display = "block" MainMenu.style.display = "none" document.getElementById('playerName').innerHTML = 'Welcome ' + name; } var input = document.getElementById("text1"); input.addEventListener("keypress", function(event) { if (event.key === "Enter") { event.preventDefault(); document.getElementById("submit").click(); } }); function tableText(col) { if (typeof event !== 'undefined') el = event.srcElement el.style.backgroundColor = col } let colIndex = Math.floor(Math.random() * 8) + 1; let rowIndex = Math.floor(Math.random() * 8) + 1; console.log('col:' + ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'][colIndex - 1], 'row:' + rowIndex); document.querySelector('#R' + rowIndex + 'C' + colIndex).onclick = () => { tableText('green'); alert("correct"); } function hideAll() { Table.style.display = "none" MainMenu.style.display = "block" } function gameReset() {} function required(e) { e.preventDefault(); var empt = document.forms["form1"]["text1"].value; if (empt == "") { alert("Please input your name"); } else { name = document.getElementById('text1').value; Start() } }

 body { text-align: center; } 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; } .Tableheader { border: 0px solid white } .TableCell { background-color: rgb(252, 142, 215); border: 2px solid black; } .button { padding: 5px; background-color: #dcdcdc; border: 1px solid #666; color: #000; margin-top: 10px; } button:hover { color: yellow; } .TableCell:hover { background-color: rgb(255, 230, 0); } body { background-image: url('https://storage.pixteller.com/designs/designs-images/2019-03-27/05/simple-background-backgrounds-passion-simple-1-5c9b95bd34713.png'); }

 <div id="MainMenu"> <form name="form1" action="#" onsubmit="required(event)"> <ul> <h2>Hurkles the Game</h2> <p>Type in your name and click start to begin</p> <li><input type='text' name='text1' id='text1' /></li> <li class="rq">*Required Field</li> <li><input type="submit" name="submit" id='submit' value="Submit" /></li> </ul> </form> </div> <div id="Table"> <div id='playerName'></div> <h2>Hurkles</h2> <p> Click a Cell to Find Hurkles</p> <table> <table id="tableID" class="center"> <tr> <td id="R0C0" class="Tableheader"></td> <td id="R0C1" class="Tableheader">A</td> <td id="R0C2" class="Tableheader">B</td> <td id="R0C3" class="Tableheader">C</td> <td id="R0C4" class="Tableheader">D</td> <td id="R0C5" class="Tableheader">E</td> <td id="R0C6" class="Tableheader">F</td> <td id="R0C7" class="Tableheader">G</td> <td id="R0C8" class="Tableheader">H</td> <td id="R0C9" class="Tableheader">I</td> <td id="R0C10" class="Tableheader">J</td> </tr> <tr> <td id="R1C0" class="Tableheader">1</td> <td id="R1C1" class="TableCell" onclick="tableText('red')"></td> <td id="R1C2" class="TableCell" onclick="tableText('red')"></td> <td id="R1C3" class="TableCell" onclick="tableText('red')"></td> <td id="R1C4" class="TableCell" onclick="tableText('red')"></td> <td id="R1C5" class="TableCell" onclick="tableText('red')"></td> <td id="R1C6" class="TableCell" onclick="tableText('red')"></td> <td id="R1C7" class="TableCell" onclick="tableText('red')"></td> <td id="R1C8" class="TableCell" onclick="tableText('red')"></td> <td id="R1C9" class="TableCell" onclick="tableText('red')"></td> <td id="R1C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R2C0" class="Tableheader">2</td> <td id="R2C1" class="TableCell" onclick="tableText('red')"></td> <td id="R2C2" class="TableCell" onclick="tableText('red')"></td> <td id="R2C3" class="TableCell" onclick="tableText('red')"></td> <td id="R2C4" class="TableCell" onclick="tableText('red')"></td> <td id="R2C5" class="TableCell" onclick="tableText('red')"></td> <td id="R2C6" class="TableCell" onclick="tableText('red')"></td> <td id="R2C7" class="TableCell" onclick="tableText('red')"></td> <td id="R2C8" class="TableCell" onclick="tableText('red')"></td> <td id="R2C9" class="TableCell" onclick="tableText('red')"></td> <td id="R2C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R3C0" class="Tableheader">3</td> <td id="R3C1" class="TableCell" onclick="tableText('red')"></td> <td id="R3C2" class="TableCell" onclick="tableText('red')"></td> <td id="R3C3" class="TableCell" onclick="tableText('red')"></td> <td id="R3C4" class="TableCell" onclick="tableText('red')"></td> <td id="R3C5" class="TableCell" onclick="tableText('red')"></td> <td id="R3C6" class="TableCell" onclick="tableText('red')"></td> <td id="R3C7" class="TableCell" onclick="tableText('red')"></td> <td id="R3C8" class="TableCell" onclick="tableText('red')"></td> <td id="R3C9" class="TableCell" onclick="tableText('red')"></td> <td id="R3C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R4C0" class="Tableheader">4</td> <td id="R4C1" class="TableCell" onclick="tableText('red')"></td> <td id="R4C2" class="TableCell" onclick="tableText('red')"></td> <td id="R4C3" class="TableCell" onclick="tableText('red')"></td> <td id="R4C4" class="TableCell" onclick="tableText('red')"></td> <td id="R4C5" class="TableCell" onclick="tableText('red')"></td> <td id="R4C6" class="TableCell" onclick="tableText('red')"></td> <td id="R4C7" class="TableCell" onclick="tableText('red')"></td> <td id="R4C8" class="TableCell" onclick="tableText('red')"></td> <td id="R4C9" class="TableCell" onclick="tableText('red')"></td> <td id="R4C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R5C0" class="Tableheader">5</td> <td id="R5C1" class="TableCell" onclick="tableText('red')"></td> <td id="R5C2" class="TableCell" onclick="tableText('red')"></td> <td id="R5C3" class="TableCell" onclick="tableText('red')"></td> <td id="R5C4" class="TableCell" onclick="tableText('red')"></td> <td id="R5C5" class="TableCell" onclick="tableText('red')"></td> <td id="R5C6" class="TableCell" onclick="tableText('red')"></td> <td id="R5C7" class="TableCell" onclick="tableText('red')"></td> <td id="R5C8" class="TableCell" onclick="tableText('red')"></td> <td id="R5C9" class="TableCell" onclick="tableText('red')"></td> <td id="R5C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R6C0" class="Tableheader">6</td> <td id="R6C1" class="TableCell" onclick="tableText('red')"></td> <td id="R6C2" class="TableCell" onclick="tableText('red')"></td> <td id="R6C3" class="TableCell" onclick="tableText('red')"></td> <td id="R6C4" class="TableCell" onclick="tableText('red')"></td> <td id="R6C5" class="TableCell" onclick="tableText('red')"></td> <td id="R6C6" class="TableCell" onclick="tableText('red')"></td> <td id="R6C7" class="TableCell" onclick="tableText('red')"></td> <td id="R6C8" class="TableCell" onclick="tableText('red')"></td> <td id="R6C9" class="TableCell" onclick="tableText('red')"></td> <td id="R6C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R7C0" class="Tableheader">7</td> <td id="R7C1" class="TableCell" onclick="tableText('red')"></td> <td id="R7C2" class="TableCell" onclick="tableText('red')"></td> <td id="R7C3" class="TableCell" onclick="tableText('red')"></td> <td id="R7C4" class="TableCell" onclick="tableText('red')"></td> <td id="R7C5" class="TableCell" onclick="tableText('red')"></td> <td id="R7C6" class="TableCell" onclick="tableText('red')"></td> <td id="R7C7" class="TableCell" onclick="tableText('red')"></td> <td id="R7C8" class="TableCell" onclick="tableText('red')"></td> <td id="R7C9" class="TableCell" onclick="tableText('red')"></td> <td id="R7C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R8C0" class="Tableheader">8</td> <td id="R8C1" class="TableCell" onclick="tableText('red')"></td> <td id="R8C2" class="TableCell" onclick="tableText('red')"></td> <td id="R8C3" class="TableCell" onclick="tableText('red')"></td> <td id="R8C4" class="TableCell" onclick="tableText('red')"></td> <td id="R8C5" class="TableCell" onclick="tableText('red')"></td> <td id="R8C6" class="TableCell" onclick="tableText('red')"></td> <td id="R8C7" class="TableCell" onclick="tableText('red')"></td> <td id="R8C8" class="TableCell" onclick="tableText('red')"></td> <td id="R8C9" class="TableCell" onclick="tableText('red')"></td> <td id="R8C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R9C0" class="Tableheader">9</td> <td id="R9C1" class="TableCell" onclick="tableText('red')"></td> <td id="R9C2" class="TableCell" onclick="tableText('red')"></td> <td id="R9C3" class="TableCell" onclick="tableText('red')"></td> <td id="R9C4" class="TableCell" onclick="tableText('red')"></td> <td id="R9C5" class="TableCell" onclick="tableText('red')"></td> <td id="R9C6" class="TableCell" onclick="tableText('red')"></td> <td id="R9C7" class="TableCell" onclick="tableText('red')"></td> <td id="R9C8" class="TableCell" onclick="tableText('red')"></td> <td id="R9C9" class="TableCell" onclick="tableText('red')"></td> <td id="R9C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R10C0" class="Tableheader">10</td> <td id="R10C1" class="TableCell" onclick="tableText('red')"></td> <td id="R10C2" class="TableCell" onclick="tableText('red')"></td> <td id="R10C3" class="TableCell" onclick="tableText('red')"></td> <td id="R10C4" class="TableCell" onclick="tableText('red')"></td> <td id="R10C5" class="TableCell" onclick="tableText('red')"></td> <td id="R10C6" class="TableCell" onclick="tableText('red')"></td> <td id="R10C7" class="TableCell" onclick="tableText('red')"></td> <td id="R10C8" class="TableCell" onclick="tableText('red')"></td> <td id="R10C9" class="TableCell" onclick="tableText('red')"></td> <td id="R10C10" class="TableCell" onclick="tableText('red')"></td> </tr> </table> <br> <br> <button type="button" id="reset" onclick="hideAll()">Start</button> </div>

Answer 1

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>

Answer 2

for click count create variable then increase the value every cell clicked, for hint you need to extract row and column from the cell id then compare with right answer.

 Table.style.display = "none"; MainMenu.style.display = "block"; var name = ''; var counter = 1; function Start() { Table.style.display = "block" MainMenu.style.display = "none" document.getElementById('playerName').innerHTML = 'Welcome ' + name; } var input = document.getElementById("text1"); input.addEventListener("keypress", function (event) { if (event.key === "Enter") { event.preventDefault(); document.getElementById("submit").click(); } }); let colIndex = Math.floor(Math.random() * 8) + 1; let rowIndex = Math.floor(Math.random() * 8) + 1; let answer = 'R' + rowIndex + 'C' + colIndex; console.log('col:' + ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'][colIndex - 1], 'row:' + rowIndex); document.querySelectorAll('.TableCell').forEach(function (el) { el.addEventListener("click", function (event) { clickCount.textContent = counter++; if (el.id == answer) { el.style.background = 'green'; alert("correct"); } else { el.style.background = 'red'; var cell = el.id.match(/R(\d+)C(\d+)/) var row = parseInt(cell[1]) var col = parseInt(cell[2]) if (row != rowIndex) { hint.textContent = row > rowIndex ? "Up" : "Down"; } else { hint.textContent = col > colIndex ? "Left" : "Right"; } } }); }) function hideAll() { Table.style.display = "none" MainMenu.style.display = "block" } function gameReset() { } function required(e) { e.preventDefault(); var empt = document.forms["form1"]["text1"].value; if (empt == "") { alert("Please input your name"); } else { name = document.getElementById('text1').value; Start() } }

 body { text-align: center; } 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; } .Tableheader { border: 0px solid white } .TableCell { background-color: rgb(252, 142, 215); border: 2px solid black; } .button { padding: 5px; background-color: #dcdcdc; border: 1px solid #666; color: #000; margin-top: 10px; } button:hover { color: yellow; } .TableCell:hover { background-color: rgb(255, 230, 0); } body { background-image: url('https://storage.pixteller.com/designs/designs-images/2019-03-27/05/simple-background-backgrounds-passion-simple-1-5c9b95bd34713.png'); }

 <div id="MainMenu"> <form name="form1" action="#" onsubmit="required(event)"> <ul> <h2>Hurkles the Game</h2> <p>Type in your name and click start to begin</p> <li><input type='text' name='text1' id='text1' /></li> <li class="rq">*Required Field</li> <li><input type="submit" name="submit" id='submit' value="Submit" /></li> </ul> </form> </div> <div id="Table"> <div id='playerName'></div> <h2>Hurkles</h2> <p> Click a Cell to Find Hurkles</p> <p><strong>Click Count: <span id="clickCount">0</span> | Hint: <span id="hint"></span></strong></p> <table id="tableID" class="center"> <tr> <td id="R0C0" class="Tableheader"></td> <td id="R0C1" class="Tableheader">A</td> <td id="R0C2" class="Tableheader">B</td> <td id="R0C3" class="Tableheader">C</td> <td id="R0C4" class="Tableheader">D</td> <td id="R0C5" class="Tableheader">E</td> <td id="R0C6" class="Tableheader">F</td> <td id="R0C7" class="Tableheader">G</td> <td id="R0C8" class="Tableheader">H</td> <td id="R0C9" class="Tableheader">I</td> <td id="R0C10" class="Tableheader">J</td> </tr> <tr> <td id="R1C0" class="Tableheader">1</td> <td id="R1C1" class="TableCell"></td> <td id="R1C2" class="TableCell"></td> <td id="R1C3" class="TableCell"></td> <td id="R1C4" class="TableCell"></td> <td id="R1C5" class="TableCell"></td> <td id="R1C6" class="TableCell"></td> <td id="R1C7" class="TableCell"></td> <td id="R1C8" class="TableCell"></td> <td id="R1C9" class="TableCell"></td> <td id="R1C10" class="TableCell"></td> </tr> <tr> <td id="R2C0" class="Tableheader">2</td> <td id="R2C1" class="TableCell"></td> <td id="R2C2" class="TableCell"></td> <td id="R2C3" class="TableCell"></td> <td id="R2C4" class="TableCell"></td> <td id="R2C5" class="TableCell"></td> <td id="R2C6" class="TableCell"></td> <td id="R2C7" class="TableCell"></td> <td id="R2C8" class="TableCell"></td> <td id="R2C9" class="TableCell"></td> <td id="R2C10" class="TableCell"></td> </tr> <tr> <td id="R3C0" class="Tableheader">3</td> <td id="R3C1" class="TableCell"></td> <td id="R3C2" class="TableCell"></td> <td id="R3C3" class="TableCell"></td> <td id="R3C4" class="TableCell"></td> <td id="R3C5" class="TableCell"></td> <td id="R3C6" class="TableCell"></td> <td id="R3C7" class="TableCell"></td> <td id="R3C8" class="TableCell"></td> <td id="R3C9" class="TableCell"></td> <td id="R3C10" class="TableCell"></td> </tr> <tr> <td id="R4C0" class="Tableheader">4</td> <td id="R4C1" class="TableCell"></td> <td id="R4C2" class="TableCell"></td> <td id="R4C3" class="TableCell"></td> <td id="R4C4" class="TableCell"></td> <td id="R4C5" class="TableCell"></td> <td id="R4C6" class="TableCell"></td> <td id="R4C7" class="TableCell"></td> <td id="R4C8" class="TableCell"></td> <td id="R4C9" class="TableCell"></td> <td id="R4C10" class="TableCell"></td> </tr> <tr> <td id="R5C0" class="Tableheader">5</td> <td id="R5C1" class="TableCell"></td> <td id="R5C2" class="TableCell"></td> <td id="R5C3" class="TableCell"></td> <td id="R5C4" class="TableCell"></td> <td id="R5C5" class="TableCell"></td> <td id="R5C6" class="TableCell"></td> <td id="R5C7" class="TableCell"></td> <td id="R5C8" class="TableCell"></td> <td id="R5C9" class="TableCell"></td> <td id="R5C10" class="TableCell"></td> </tr> <tr> <td id="R6C0" class="Tableheader">6</td> <td id="R6C1" class="TableCell"></td> <td id="R6C2" class="TableCell"></td> <td id="R6C3" class="TableCell"></td> <td id="R6C4" class="TableCell"></td> <td id="R6C5" class="TableCell"></td> <td id="R6C6" class="TableCell"></td> <td id="R6C7" class="TableCell"></td> <td id="R6C8" class="TableCell"></td> <td id="R6C9" class="TableCell"></td> <td id="R6C10" class="TableCell"></td> </tr> <tr> <td id="R7C0" class="Tableheader">7</td> <td id="R7C1" class="TableCell"></td> <td id="R7C2" class="TableCell"></td> <td id="R7C3" class="TableCell"></td> <td id="R7C4" class="TableCell"></td> <td id="R7C5" class="TableCell"></td> <td id="R7C6" class="TableCell"></td> <td id="R7C7" class="TableCell"></td> <td id="R7C8" class="TableCell"></td> <td id="R7C9" class="TableCell"></td> <td id="R7C10" class="TableCell"></td> </tr> <tr> <td id="R8C0" class="Tableheader">8</td> <td id="R8C1" class="TableCell"></td> <td id="R8C2" class="TableCell"></td> <td id="R8C3" class="TableCell"></td> <td id="R8C4" class="TableCell"></td> <td id="R8C5" class="TableCell"></td> <td id="R8C6" class="TableCell"></td> <td id="R8C7" class="TableCell"></td> <td id="R8C8" class="TableCell"></td> <td id="R8C9" class="TableCell"></td> <td id="R8C10" class="TableCell"></td> </tr> <tr> <td id="R9C0" class="Tableheader">9</td> <td id="R9C1" class="TableCell"></td> <td id="R9C2" class="TableCell"></td> <td id="R9C3" class="TableCell"></td> <td id="R9C4" class="TableCell"></td> <td id="R9C5" class="TableCell"></td> <td id="R9C6" class="TableCell"></td> <td id="R9C7" class="TableCell"></td> <td id="R9C8" class="TableCell"></td> <td id="R9C9" class="TableCell"></td> <td id="R9C10" class="TableCell"></td> </tr> <tr> <td id="R10C0" class="Tableheader">10</td> <td id="R10C1" class="TableCell"></td> <td id="R10C2" class="TableCell"></td> <td id="R10C3" class="TableCell"></td> <td id="R10C4" class="TableCell"></td> <td id="R10C5" class="TableCell"></td> <td id="R10C6" class="TableCell"></td> <td id="R10C7" class="TableCell"></td> <td id="R10C8" class="TableCell"></td> <td id="R10C9" class="TableCell"></td> <td id="R10C10" class="TableCell"></td> </tr> </table> <br> <br> <button type="button" id="reset" onclick="hideAll()">Start</button> </div>