如何为 HTML 元素分配随机 id？答案

【问题标题】：How to assign a random id to a HTML element?如何为 HTML 元素分配随机 id？
【发布时间】：2017-07-15 17:35:28
【问题描述】：

我正在做一个项目，这是一个猜谜游戏。例如，我希望按钮的顺序是随机的，这样正确的答案就不会总是在左边。所以我的 HTML 按钮 id 是“1”、“2”、“3”、“4”，我想为每个按钮分配一个随机 id（例如 1 变为 4）我已经尝试过 math.random 并制作它 1-4 有可能重叠数字。我怎样才能使数字不重叠？谢谢！

【问题讨论】：

你能发布你的尝试吗？

标签： javascript html random

【解决方案1】：

创建一个按钮 ID 数组（我们将在此处使用 1 - 4），然后从数组中随机获取一个元素并将其用作按钮 ID。

while 循环遍历按钮 ID 数组并随机拉出一个，然后将其从数组中删除，因此无法再次选择它。它重复此过程，直到按钮 ID 数组为空。

var buttons = [1, 2, 3, 4];

while (buttons.length) {
  var buttonEl = document.createElement('button');
  var buttonId = buttons.splice(Math.floor(Math.random() * buttons.length), 1)[0];
  buttonEl.id = 'id-' + buttonId;
  buttonEl.innerText = buttonId;

  document.getElementById('buttons').appendChild(buttonEl);
}

<div id="buttons">
</div>

【讨论】：

【解决方案2】：

我认为，最好不要创建或搜索新的随机数。但是洗牌你现有的阵列。而不是为按钮分配 id。

var ids = [1,2,3,4,5];
var shuffledIds = shuffle(ids);
console.log(shuffledIds);

function shuffle(array) {
    var rand, index = -1,
        length = array.length,
        result = Array(length);
    while (++index < length) {
        rand = Math.floor(Math.random() * (index + 1));
        result[index] = result[rand];
        result[rand] = array[index];
    }
    return result;
}

【讨论】：