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

【问题标题】：Use checkbox to choose which array(s) to select a random value from in JavaScript使用复选框选择从 JavaScript 中选择随机值的数组
【发布时间】：2018-01-13 20:29:49
【问题描述】：

在小提琴中：

单击“开始”按钮会给出两个随机选择（每个数组中的一个）。

我的问题：

我想使用复选框（或类似的）来确定应该随机化哪个值以及应该“保存”哪个值。

示例：

点击前往
给出了'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;
}

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

对此的任何帮助将不胜感激！提前致谢。

【问题讨论】：

标签： javascript html arrays checkbox

【解决方案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>

【讨论】：

这很好，感谢您的快速回复！我是 JS 的新手，所以我实际上并不了解很多，但它完全符合我的要求！我认为它是可扩展的？
@MISQ 很高兴我能帮上忙。它应该可以毫不费力地扩展。例如，这就是我引入data-message-id 属性、创建包装数组并提取随机函数的原因。如果您不理解代码的任何特定部分，请询问。（另外，如果您对我的回答有帮助，我会很高兴/赞成/接受）。
我现在明白了，因为我有机会使用它。到目前为止它工作得很好，而且比我以前使用的代码更有效率 - 再次感谢！很大的帮助。（接受但不能以低代表投票！）
再次感谢您对此的帮助 - 有没有办法让相同的 data-message-id-x 值也显示在单独的 div 中？即：message1 和 message2 都有一个复选框 - 我想在另一个 div 中也显示相同的结果（message1a 和 message2a），只是没有复选框
@MISQ 您可以简单地在现有的...innerHTML 后面添加另一个...innerHTML。这应该没有问题。

【解决方案2】：

只需添加一个选择：

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

然后创建一个二维数组供您选择：

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

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

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)];
}

In action

【讨论】：