Javascript 制作<；部门>；以随机顺序和随机位置出现

我正在尝试使用JavaScript、HTML和CSS创建一个小游戏。其结构为4x4表。我的表格的每一行都存储在

标记中。每个

包含4个

s。我想让表中的一个随机元素在我按下按钮时出现。另外，让元素以随机顺序出现也很好

以下是我的部分代码：

<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="11"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="21"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="31"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="41"></i>
</section>
<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="12"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="22"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="32"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="42"></i>
</section>
<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="13"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="23"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="33"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="43"></i>   
</section>
<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="14"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="24"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="34"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="44"></i>
</section>

所以，我的目标是：拥有一个函数，每次显示一个元素（我将使用按钮中的onClick属性调用它）。该元素将是表中的随机元素

---

有人能帮我吗？非常感谢

以下内联代码片段实现了网格元素的随机显现，并演示了一些（希望如此）有用的概念：

• 基于Css的布局，使用表格布局的

  显示
  属性
  以Css属性为中心的内容
  显示：flex
  
  使用
  document.querySelector（…）
  ，
  document.queryselectoral（…）
  对DOM元素进行编程访问
  DOM节点列表不是数组。类似的惊喜比比皆是，参考文档和规格是你的朋友。文档，而不是YouTube视频
  

请记住，

id

属性值不能是数字。避免过度优化-尚未显示的元素的选择非常原始，可见的元素越多，就越需要尝试查找隐藏的元素。然而，在与行动迟缓的人互动时，效率不是问题……；）

让b_allVisible=false
;
函数showme（eve）{
让我们来选择
，n_c
，n_r
;
b_allVisible=(
排列
.from（document.querySelectorAll（'div[id^=“c-”]））
.some（（pe_grid）=>{return pe_grid.style.visibility！==“visible”；}）
);
如果（b_全部可见）{
document.getElementById（'showme'）.setAttribute（'disabled'，'disabled'）；
}否则{
做{
n_c=1+Math.floor（4*Math.random（））；
n_r=1+Math.floor（4*Math.random（））；
e#u selected=document.querySelector（`c-${n_c}${n_r}`）；
//这里（通过id引用元素），也可以使用'document.getElementById（`c-${n_c}${n_r}'）。
//请注意，没有ID的选择器标记“#”
}而（e_selected.style.visibility=='visible'）；
e_selected.style.visibility='visible'；
}
}//showme

body>部分{
显示：表格；
填充：20px；
}
第4.OggetoElements节{
显示：表格行；
}
section.oggettoElements>div{
显示：表格单元格；
边框：实心1px黑色；
高度：30px；
宽度：30px；
可见性：隐藏；
}
section.oggettoElements>div>div{
显示器：flex；
高度：30px；
对齐项目：居中；
证明内容：中心；
}
div>span{
弹性：1；
文本对齐：居中
}

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
让我看看