使用复选框选择要从 JavaScript 中选择随机值的数组

Question

在小提琴中：

单击"开始"按钮时给出两个随机选择(每个数组一个(。

我的问题：

我想使用复选框(或类似(来确定哪些值应该随机化，哪些值应该"保存"。

例：

• 点击"前往">
• 给出"2"和"6">
• 勾选"2"下的复选框以"保存"值
• 再次单击"开始">
• 剩下 2 个，第二个值现在是 4

https://jsfiddle.net/9eekhdyk/

.HTML：

<input class="btn" type="button" id="btnSearch" value="Go" onclick="GetValue();" />
<p id="message1" >Random</p>
<p id="message2" >Random</p>

.JS：

function GetValue()
{
var myarray1 = new Array("1","2","3");
var myarray2 = new Array("4","5","6");
var random1 = myarray1[Math.floor(Math.random() * myarray1.length)];
var random2 = myarray2[Math.floor(Math.random() * myarray2.length)];
document.getElementById("message1").innerHTML=random1;
document.getElementById("message2").innerHTML=random2;
}

为简单起见，该示例被完全剥离;我会在更大的范围内使用它。

任何这方面的帮助将不胜感激！ 提前谢谢。

Answer 1

也许是这样的？我稍微更改了 HTML，以增加一个<span>来保存随机值，并在每个复选框之前添加一个<input type="checkbox" />。

最终，我只是使用复选框在未:not(:checked)时从document.querySelectorAll的结果集中排除范围。因此，仅处理前面没有选中复选框的span。然后，对于该跨度，分配一个随机值。

我还将随机值的选择提取到一个函数中，该函数仅在实际需要值时才调用。每个跨度的data-message-id将跨度与随机数组相关联，随机数组被放入自己的数组中以进行基于索引的访问。因此，对于data-message-id="1"，randomArr[0]被访问等。

如果有什么不清楚的地方，请不要犹豫。

function GetValue()
{
var myarray1 = new Array("1","2","3");
var myarray2 = new Array("4","5","6");

const randomArr = [myarray1, myarray2];

Array.prototype.slice.call(document.querySelectorAll(".message > input[type='checkbox']:not(:checked) + span"))
.forEach(function (elem) {
const id = parseInt(elem.dataset.messageId);
elem.innerHTML = random(randomArr[id - 1]);
});
}
function random (arr) {
return arr[Math.floor(Math.random() * arr.length)]
}

<input class="btn" type="button" id="btnSearch" value="Search" onclick="GetValue();" />
<p id="message1" class="message">
<input type="checkbox">
<span data-message-id="1">Random</span>
</p>
<p id="message2" class="message">
<input type="checkbox" />
<span data-message-id="2">Random</span>
</p>

Answer 2

只需添加一个选择：

<select id="choose"> </select>

然后创建数组的 2D 数组以供选择：

var arrays = [
[1,2,3,4],
[5,6,7,8]
];

然后在选择中添加两个选项：

var select = document.getElementById("choose");
arrays.forEach(function(_,i){
select.innerHTML += 
`<option value="${i}" > ${i} </option>`;
});

所以现在选择包含每个数组索引作为一个选项， 现在准备好了：

function getRandom(){
var array = arrays[ select.selectedIndex ];
var result = array[Math.floor(Math.random()*array.length)];
}

在行动中