'Use a value on an HTML checkbox as an already declared array? Vanilla JavaScript
So I have been having trouble finishing a function I would need for generating stuff for tabletop games. I have checkboxes in my HTML for a user to selected which things they want to be generated. The function is meant to take an multidimensional array, and iterate over, and randomly picking one piece of data from each layer of the array passed through it. Which when I just use an array it works.
JavaScript
// Checkbox Select Function Variables
const cb = document.querySelectorAll('[name="arrays"]')
let selected = [];
let count = 0
for(var i = 0; i < cb.length; i++){
if(cb[i].checked){
selected.push(cb[i].value)
}
} // End of chekcbox select for loop
do{
// Array Parse Function Variables
let arrayItem = selected[count]; // Stores the index value of selected equal to count
let res = Math.floor(Math.random()*arrayItem.length); // The RNG to pick from the array
The problem is getting the individual checkboxes to mean the corresponding array. Currently I was setting the value of each checkbox to the name of array needed and pushing that onto a new variable and I was hoping that the values would just act like the already declared arrays in my file. But I think they are just strings, not my arrays. everything about my function works except for selecting arrays used according to the checked boxes and my research has not found anything that works so far. I don't know if using the value in the checkboxes is the best way of doing this, but I do need some way for each checkbox to correspond with my arrays.
HTML
<div class="arraySelect">
<label for="villainMotive">Villain Motive
<input type="checkbox" name="arrays" value="villainMotive" id="villainMotive">
</label><br>
<label for="villainMethod">Villain Method
<input type="checkbox" name="arrays" value="villainMethod" id="villainMethod">
</label><br>
<label for="villainWeakness">Villain Weakness
<input type="checkbox" name="arrays" value="villainWeakness" id="villainWeakness">
</label><br>
</div> <!-- End of arraySelect -->
<div class="arrayButton">
<button type="button">Array One</button>
</div><!--End of arrayButton-->
<div class="arrayOneText">
</div><!--End of arrayOneText-->
Full JavaScript
// HTML Selectors
const arrayButton = document.querySelector("button"); // Grabs HTML button needed
const arrayOneText = document.querySelector(".arrayOneText"); // Grabs the HTML text field to display the RNG text
// Array Parse Function
arrayButton.addEventListener("click", function(){ // Button click starts function
// Checkbox Select Function Variables
const cb = document.querySelectorAll('[name="arrays"]')
let selected = [];
let count = 0
for(var i = 0; i < cb.length; i++){
if(cb[i].checked){
selected.push(cb[i].value)
}
} // End of chekcbox select for loop
do{
// Array Parse Function Variables
let arrayItem = selected[count]; // Stores the index value of selected equal to count
let res = Math.floor(Math.random()*arrayItem.length); // The RNG to pick from the array
let setArray = arrayItem[res]; // Variable to check if first RNG result contains another array
let first = setArray[0]; // Store first index of setArray
let second = setArray[1]; // Stores second index of setArray, should always be another array
let arrayCount = 0 // Count for iterations of loop, used to break loop if stuck in it
let product = [setArray[0]]; // Variable to store seperated array values, then display on webpage
// Array Parse MAIN
do{
// setArray index[1] array check
if (Array.isArray(setArray[1])){ // Checks if setArray had another array at index 1
res = Math.floor(Math.random()*second.length); // Runs the RNG for second
setArray = second[res]; // Overwrites setArray to be the new RNG result from second
first = setArray[0]; // Overwrites first to be the new index 0 of setArray
second = setArray[1]; // Overwrites second to be index 1 of setArray
} else{
product = setArray; // Overwrites product to be correct insted of the push of first
break; // Exits loop completely
} // End of setArray index[1] array check if else
// setArray array check
if (Array.isArray(setArray)){ // Checks if setArray is an array
product.push(first); // Adds value of first to product if setArray is another array
} else {
product.push(setArray); // Adds value of setArray to product
} // End of setArray array check if else
arrayCount++ // Iterates arrayCount each complete do loop done
if (arrayCount === 15) break; // Checks arrayCount to prevent an infinite loop and break out of it
} // End of do
while (Array.isArray(second)); // Reruns do loop while second is an array at the end of the loop
// Array Parse Formating
if (Array.isArray(product)){ // Checks if product is an array
arrayOneText.innerText = product.join(" - "); // Displays and formats product if it is an array on the page
} else {
arrayOneText.innerText = product; // Displays product on the page
} // End of product array check if else
count++ // Iterates count each complete do loop done
if (count === selected.length) break; // Checks count to prevent an infinite loop and break out of it
} // End of checkbox select do while
while (count < selected.length);
}) // End of Array Parse
Sample array 1
const villainMotive = [
["Immortality",
["Acquire a legendary item to prolong life",
"Ascend to Godhood",
"Become undead or obtain a younger body",
"Steal a planar creature essence"]],
["Influence",
["Seize a position of power or title",
"Win a contest or tournament",
"Win favor with a powerful individual",
"Place a pawn into a position of power"]],
["Magic",
["Obtain an ancient artifact",
"Build a construct or magical device",
"Carry out a deity's wishes",
"Offer a sacrifice to a deity",
"Contact a lost deity or power",
"Open a gate to another world"]],
Sample Array 2
const villainMethod = [
["Agricultural Devastation",
["Blight",
"Crop Failure",
"Drought",
"Famine"]],
"Assualt or Beatings",
"Bounty Hunting",
"Assassination",
["Captivity",
["Slavery",
"Shackling",
"Imprisonment",
"Kidnapping"]],
Sample array 3
const villainWeakness = [
"A hidden object that holds the villain's soul",
"The villain's power is broken if the death of their true love is avenged",
"The villain is weakened in the presence of a particular artifact",
"A special deals extra damage when used against the villain",
"The villain is destroyed if it speaks its true name",
"An ancient prophecy or riddle reveals how the villain can be overthrown",
"The villain fails when an ancient enemy forgives its past actions",
"The villain loses its power if a mystic bargain it struck long ago is completed"
]
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
