Generating secure random numbers for HTML form

Question

I am trying to create a JS function to generate 6 random, secure numbers that are inputted in a HTML form. I currently have:

function secureRandomNums(len) {
    let array = new Uint8Array(len);
    window.crypto.getRandomValues(array);
    return array;
}

function getRandomNumbers() {
    let elements = form.getElementsByName("number[]");
    let nums = secureRandomNums(elements.length);
    for (let i = 0; i < nums.length; i++) {
        elements[i].value = nums[i]
    }
}

In the HTML file I am calling the getRandomNumbers here:

<form action="AddUserNumbers" id="add_numbers_form" method="post" class="forms">
            <label for="number1">Number 1:</label><br>
            <input type="text" id="number1" name="number[]"><br>

            <label for="number2">Number 2:</label><br>
            <input type="text" id="number2" name="number[]"><br>

            <label for="number3">Number 3:</label><br>
            <input type="text" id="number3" name="number[]"><br>

            <label for="number4">Number 4:</label><br>
            <input type="text" id="number4" name="number[]"><br>

            <label for="number5">Number 5:</label><br>
            <input type="text" id="number5" name="number[]"><br>

            <label for="number6">Number 6:</label><br>
            <input type="text" id="number6" name="number[]"><br>

            <input type="button" value="Generate numbers!" onclick="getRandomNumbers()"><br>
            <input type="submit" id="submit_numbers" value="Submit your numbers" form="add_numbers_form"><br>
</form>

But it is not displaying the values. What am I doing wrong?

I had it working with an implementation of the Math.random() function but this is not as secure as window.crypto.

Answer 1

getElementsByName() is a document level method and not available at element level

Use querySelectorAll() instead to query elements that only exist in the specific form

const form = document.forms[0]


function secureRandomNums(len) {
  let array = new Uint8Array(len);
  window.crypto.getRandomValues(array);
  return array;
}

function getRandomNumbers() {
  let elements = form.querySelectorAll('input[name="number[]"]');
  let nums = secureRandomNums(elements.length);
  for (let i = 0; i < nums.length; i++) {
    elements[i].value = nums[i]
  }
}

<form>
  <input name="number[]" />
  <input name="number[]" />
  <input name="number[]" />
  <input type="button" value="Generate numbers!" onclick="getRandomNumbers()"><br>
</form>