Use checkbox to choose which array(s) to select a random value from in JavaScript

Question

In the fiddle:

Two random selections (one from each array) are given on clicking the Go button.

My question:

I would like to use checkboxes (or similar) to determine which value should be randomised and which should be 'saved'.

Example:

• Click Go
• '2' & '6' are given
• Tick a checkbox under '2' to 'save' the value
• Click Go again
• 2 remains, second value is now 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;
}

The example is completely stripped back for simplicity; I would be using it on a larger scale.

Any help on this would be greatly appreciated! Thanks in advance.

Answer 1

Simply add a select :

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

Then create a 2d array of your arrays to choose from:

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

Then add two options to the select:

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

So now the select contains every array index as an option, And now were ready to do:

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

In action

Answer 2

Maybe like this? I changed the HTML a bit to have an additional <span> to hold the random value and added an <input type="checkbox" /> before each checkbox.

Ultimately, I just use the checkboxes to exclude the span from the result set of document.querySelectorAll when it is not :not(:checked) . Hence, only span are handled which are not preceded by a checked checkbox. Then, for of that spans, a random value is assigned.

I also extracted the choosing of the random value into a function, which is only called when a value is actually needed. The data-message-id of each span associates the span with the random array, which was put into an own array for index-based access. Thus, for data-message-id="1" , randomArr[0] is accessed etc.

Please don't hesitate to ask if anything is unclear.

 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>