Create unique cell in generated table

Question

the table was refreshing before, now it doesn't. now, check the new code snippet, and what the main goal i'm trying to achieve (explained in the last comment), i believe this new snippet will help clarify what i'm looking for. im sorry for troubling you a lot but really appreciated the help :D

 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);

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

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

Answer 1

I'm not sure what the point of "clicking" on one of the cells is. So lets keep your code as it is. Only change is the last few lines on how to select/set a unique table cell as unique...

 var isCol=0; var board=[]; for(r=0;r<7;r++){ var line=[]; for(c=0;c<7;c++){ line.push(r); } board.push(line); } function prs(c,r){ showTable(c,r); isCol=(isCol+1)%2; getUnique(); } 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+=RandomGenerator(50, 500); 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); /* keep your code as is for now and add the following lines */ 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: fuchsia; }

 <div id='ff'></div>