To better understand my point, please run the code snippet provided. I have 49 cells with randomized numbers that change every time a cell is clicked. My goal is to keep these numbers from changing unless the page is refreshed or a specific button is clicked.
var uniqueCell = document.getElementById('uniqueCell');
function myFunction() {
document.querySelector("uniqueCell").style.backgroundColor = "red";
}
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;
}
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);td{
border:2px solid black;
width:10px;
height:10px;
}
td:hover{background-color:lightgreen;}
.grn{
background-color:green;
color:white;
}<div id='ff'></div>
<td id = "uniqueCell"> </td>