Javascript 如果数组具有相应的值，则为特定于颜色的单元格

我正在尝试用与数组值对应的黄色为所有单元格着色。例如，在下面的图片中，所有数字1-12都可以点击，并且都有自己的功能

当我单击1时，函数从1-25生成4个数字，并将其存储在数组中。假设数字是2,5,8,10。因此，单元格2、5、8、10应为黄色。如何为数组值对应的单元格着色

我的单元格具有表示其值的ID。所以数字1的id是“1”，依此类推。我想不出任何办法

函数func1（）{
var random=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]；
风险值选择=[1,2,3,4,5,6,7,8,9,10,11,12]；
var数=[]；
对于（i=0；i<4；i++）{
var randomPositionl=Math.floor（Math.random（）*random.length）；
var final=随机拼接（随机位置L，1）；
控制台日志（最终）；
}
}
函数func2（）{
控制台日志（2）；
}
函数func3（）{
控制台日志（3）；
}
函数func4（）{
控制台日志（4）；
}
函数func5（）{
控制台日志（5）；
}
函数func6（）{
控制台日志（6）；
}
函数func7（）{
控制台日志（7）；
}
函数func8（）{
控制台日志（8）；
}
函数func9（）{
控制台日志（9）；
}
函数func10（）{
控制台日志（10）；
}
函数func11（）{
控制台日志（11）；
}
函数func12（）{
控制台日志（12）；
}

表格{
字体系列：arial，无衬线；
字体大小：16px；
边界塌陷：塌陷；
宽度：100%；
左边距：自动；
右边距：自动；
表布局：固定；
文本对齐：居中；
光标：指针；
颜色：白色；
浮动：左；
文本阴影：2PX2PX4PX000000；
背景色：黑色；
}
运输署{
边框：2px#a49e9b实心；
}
td:悬停{
背景颜色：黄色；
}

JS-Bin
1.
3.
5.
7.
9
11
2.
4.
6.
8.
10
12

也许你是这个意思

我觉得这里的数组太多了

const tb=document.getElementById（“tb”）；
常量单元格=tb.querySelectorAll（“td”）
tb.addEventListener（“单击”，func）
函数func（e）{
tgt=e.target；
var final=[]
var数=[]；
对于（i=0；i<4；i++）{
var randomPositionl=Math.floor（Math.random（）*cells.length）；
最终推（随机定位）；
}
控制台日志（最终）；
const num=+tgt.id；
console.log（num）
cells.forEach（（cell，i）=>cell.classList.toggle（“黄色”，final.includes（i）））
}

表格{
字体系列：arial，无衬线；
字体大小：16px；
边界塌陷：塌陷；
宽度：100%；
左边距：自动；
右边距：自动；
表布局：固定；
文本对齐：居中；
光标：指针；
颜色：白色；
浮动：左；
文本阴影：2PX2PX4PX000000；
背景色：黑色；
}
运输署{
边框：2px#a49e9b实心；
}
td:悬停{
背景颜色：黄色；
}
黄先生{
背景颜色：黄色；
}

1.
3.
5.
7.
9
11
2.
4.
6.
8.
10
12

const previous=[]；
函数func1（）{
var random=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]；
风险值选择=[1,2,3,4,5,6,7,8,9,10,11,12]；
var数=[]；
previous.map（n=>{
const e=document.querySelector（`id${n}`）；
如果（！e | |！e.style）返回；
e、 style.removeProperty（'background'）；}）；
前一个长度=0；
对于（i=0；i<4；i++）{
var randomPositionl=Math.floor（Math.random（）*random.length）；
var n=随机[randomPositionl]；
前推（n）；
const e=document.querySelector（`id${n}`）；
如果（！e | |！e.style）继续；
e、 style.setProperty（'background'，'yellow'）；
}
}
函数func2（）{
控制台日志（2）；
}
函数func3（）{
控制台日志（3）；
}
函数func4（）{
控制台日志（4）；
}
函数func5（）{
控制台日志（5）；
}
函数func6（）{
控制台日志（6）；
}
函数func7（）{
控制台日志（7）；
}
函数func8（）{
控制台日志（8）；
}
函数func9（）{
控制台日志（9）；
}
函数func10（）{
控制台日志（10）；
}
函数func11（）{
控制台日志（11）；
}
函数func12（）{
控制台日志（12）；
}

表格{
字体系列：arial，无衬线；
字体大小：16px；
边界塌陷：塌陷；
宽度：100%；
左边距：自动；
右边距：自动；
表布局：固定；
文本对齐：居中；
光标：指针；
颜色：白色；
浮动：左；
文本阴影：2PX2PX4PX000000；
背景色：黑色；
}
运输署{
边框：2px#a49e9b实心；
}
td:悬停{
背景颜色：黄色；
}

JS-Bin
1.
3.
5.
7.
9
11
2.
4.
6.
8.
10
12

我将向您推荐另一种实现方法

function func1(td) {
  let randomColor = Math.floor(Math.random()*16777215).toString(16); // hexa code
  td.style.backgroundColor = randomColor ;  // fixing td background color 
  
}

并使用以下内容更新您的html：

<table cellpadding="15" cellspacing="15">
<tr>
  <td id="1" onclick="func1(this)">1</td>
  <td id="3" onclick="func3(this)">3</td>
  <td id="5" onclick="func5(this)">5</td>
  <td id="7" onclick="func7(this)">7</td>
  <td id="9" onclick="func9(this)">9</td>
  <td id="11" onclick="func11(this)">11</td>
</tr>
<tr>
  <td id="2" onclick="func2(this)">2</td>
  <td id="4" onclick="func4(this)">4</td>
  <td id="6" onclick="func6(this)">6</td>
  <td id="8" onclick="func8(this)">8</td>
  <td id="10" onclick="func10(this)">10</td>
  <td id="12" onclick="func12(this)">12</td>
</tr>

1.
3.
5.
7.
9
11
2.
4.
6.
8.
10
12

您始终可以使用

queryselectoral（）

抓取方形选择器，然后获取它们的键并将它们放入数组中。然后将该索引值数组运行到一个helper函数中，该函数将返回4个随机索引。然后在索引数组上循环检查这些索引，以获得与这些索引匹配的元素，并将其背景色设置为黄色

const cont=document.querySelector（“.grid container”）
常量平方=cont.queryselectoral（“.squares”）
常数索引=[]
for（正方形的常数键。键（））{
索引。推（键）；
}
//用于将随机唯一值返回到数组中的helper函数
常量getRan=（arr，count）=>{
设温度=arr.slice（arr）；
让ret=[]
//让我们从数组中获取永远不会匹配的唯一值
for（设i=0；i{
sq.addEventListener（'c