选择随机HTML元素

Question

我正试图制作一个脚本来选择一个随机元素并更改它的css元素。它们都有id，但都和我使用函数制作的一样。

const display = document.getElementsByClassName('display')[0];
function grid() {
for(let i = 0; i < 6; i++) {
for(let j = 0; j < 4; j++) {
square = document.createElement('div');
square.className = 'square';
display.appendChild(square);
}
}
};
grid();

上面是我用来制作元素的函数，但我不知道如何制作，所以我可以随机选择其中一个。

Answer 1

获取所有元素的列表，您可以将其作为grid():的一部分

function grid() {
const elements = [];
for(..) {
for(...) {
const square = ...
...
elements.push(square);
}
}
return elements;
}
const squares = grid();

或者你可以直接查询选择它们：

...
grid();
const squares = Array.from(document.querySelectorAll(`.square`);

之后；得到一个随机的"；已经从JavaScript数组中获取了一个随机值作为已建立的应答帖子。

Answer 2

使用纯JavaScript：

简单的JavaScript读起来可能有点冗长/复杂，但它是自包含的，因此对于不喜欢使用库的开发人员来说，它是最好的选择。

var squares = document.querySelectorAll(".square");
squares[Math.floor(Math.random() * squares.length)].style.background = "red";

.square{
display:inline-block;
width:50px;
height:50px;
background:blue;
}

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

使用Rando.js：

Rando.js使随机性更易于阅读，同时也增加了随机性的熵(因此人们无法预测下一个"随机"结果(。

rando(document.querySelectorAll(".square")).value.style.background = "red";

.square{
display:inline-block;
width:50px;
height:50px;
background:blue;
}

<script src="https://randojs.com/2.0.0.js"></script>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

使用Rando.js和jQuery(我会怎么做(

Rando.js处理随机性，而jQuery使元素选择和样式编辑更易于阅读。

rando($(".square")).value.css({background: "red"});

.square{
display:inline-block;
width:50px;
height:50px;
background:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://randojs.com/2.0.0.js"></script>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>