Select a cell from the table and giving it unique class

Question

I have 49 cells (7x7 rows/cols), and I'm trying to create one cell out of the 49 cells to be unique, as you can see when you run the snippet, the 49 cells have random numbers between 50 to 500, and one of these cells have Red color.

The problem I'm struggling with, I want that one cell to have Symbol (marking plate) like S or D for example instead of number, How i can achieve that?

 var isCol = 0; var board = []; for (r = 0; r < 7; r++) { var line = []; for (c = 0; c < 7; c++) { line.push(RandomGenerator(50, 500)); } board.push(line); } function prs(c, r) { showTable(c, r); isCol = (isCol + 1) % 2; } function toColor(col, row, chosen_col, chosen_row) { var ret = false; switch (isCol) { case 0: if (row == chosen_row) { ret = true; } break; case 1: if (col == chosen_col) { ret = true; } break; } return ret; } function showTable(chosen_col, chosen_row) { var str = ""; str += "<table border=1>"; for (row = 0; row < 7; row++) { str += "<tr>"; for (col = 0; col < 7; col++) { str += "<td onclick='prs(" + col + "," + row + ")'"; if (toColor(col, row, chosen_col, chosen_row)) { str += " class='grn' "; } str += ">"; str += board[row][col]; str += "</td>"; } str += "</tr>"; } str += "</table>"; document.getElementById("ff").innerHTML = str; } function RandomGenerator(min, max) { return Math.floor(Math.random() * (max - min) + min); } showTable(-1); var getUnique = function(){ var tdElements = document.querySelectorAll('#ff td'); tdElements[ RandomGenerator(0, tdElements.length) ].classList.add('uniqueCell') }; getUnique();

 td{ border:2px solid black; width:10px; height:10px; } td:hover{background-color:lightgreen;} .grn{ background-color:green; color:white; } .uniqueCell { background-color: tomato; }

 <div id="ff"></div>

Answer 1

It seems pretty easy as you have a class ( uniqueCell ) in the element. You can simply target the cell with the class ( uniqueCell ) and set the innerText or textContent property:

document.querySelector('.uniqueCell').textContent = 'S';

 var isCol = 0; var board = []; for (r = 0; r < 7; r++) { var line = []; for (c = 0; c < 7; c++) { line.push(RandomGenerator(50, 500)); } board.push(line); } function prs(curr, c, r) { showTable(curr, c, r); isCol = (isCol + 1) % 2; } function toColor(col, row, chosen_col, chosen_row) { var ret = false; switch (isCol) { case 0: if (row == chosen_row) { ret = true; } break; case 1: if (col == chosen_col) { ret = true; } break; } return ret; } function showTable(c, chosen_col, chosen_row) { var str = ""; str += "<table border=1>"; for (row = 0; row < 7; row++) { str += "<tr>"; for (let col = 0; col < 7; col++) { str += "<td onclick='prs(this, " + col + "," + row + ")'"; if (toColor(col, row, chosen_col, chosen_row)) { if(c.textContent == board[row][col]){ str += " class=uniqueCell"; } else str += " class='grn' "; } str += ">"; if(c.textContent == board[row][col]){ str += 'S'; } else str += board[row][col]; str += "</td>"; } str += "</tr>"; } str += "</table>"; document.getElementById("ff").innerHTML = str; } function RandomGenerator(min, max) { return Math.floor(Math.random() * (max - min) + min); } showTable(-1); var getUnique = function(){ var tdElements = document.querySelectorAll('#ff td'); tdElements[ RandomGenerator(0, tdElements.length) ].classList.add('uniqueCell'); // update the text of the cell using the class document.querySelector('.uniqueCell').textContent = 'S'; }; getUnique();

 td{ border:2px solid black; width:10px; height:10px; text-align: center; } td:hover{background-color:lightgreen;} .grn{ background-color:green; color:white; } .uniqueCell { background-color: tomato; }

 <div id="ff"></div>