How to generate random number?

Question

I tried to generate a random number with the click of a button with vanilla Javascript. but my approach does not work.

function webservice_key_key() {
  var input = document.getElementById("webservice_key_key");
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  document.addEventListener('keyup', function(e) {
    for (var i = 0; i < 5; i++)
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
  });
}

<div class="input-group">
  <input type="text" id="webservice_key_key" name="webservice_key[key]" required="required" class="form-control">
  <span class="input-group-btn ml-1">
    <button class="btn btn-secondary js-generator-btn" type="button" data-target-input-id="webservice_key_key" data-generated-value-length="32">Generate</button>
  </span>
</div>

What do you want to achieve ? You didn't tell us! And what do you mean by *"mandatory number"* ? — ThS, Oct 09 '22 at 20:44
The goal is to generate an API key. mandatory = random (sorry wrong word) — Pierre, Oct 09 '22 at 20:48
how you want to do that ? What are the steps to generate that key and when (on a button click maybe) ? — ThS, Oct 09 '22 at 20:49
You need to display `text` somewhere. The return value of the event listener isn't used for anything. — Barmar, Oct 09 '22 at 20:53
Does this answer your question? [Generate random number between two numbers in JavaScript](https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript) — Slbox, Oct 09 '22 at 20:59

score 0 · Accepted Answer · answered Oct 09 '22 at 20:58

You need to initialize text to an empty string before the loop.
You should assign the resulting text to the value of the input.
The event listener should be run when you click on the Generate button, not on keyup.
You need to call the webservice_key_key() function to add the event listener.

function webservice_key_key() {
  var input = document.getElementById("webservice_key_key");
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  document.getElementById("generate").addEventListener('click', function(e) {
    let text = '';
    for (var i = 0; i < 5; i++)
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    input.value = text;
  });
}

webservice_key_key();

<div class="input-group">
  <input type="text" id="webservice_key_key" name="webservice_key[key]" required="required" class="form-control">
  <span class="input-group-btn ml-1">
    <button id="generate" class="btn btn-secondary js-generator-btn" type="button" data-target-input-id="webservice_key_key" data-generated-value-length="32">Generate</button>
  </span>
</div>

score 0 · Answer 2 · answered Oct 09 '22 at 21:10

Also, you may need to get data-generated-value-length and use it in generator

// Run when button clicked
document.getElementById("generate_button").addEventListener('click', function() {
  // Link to input
  const input = document.getElementById("webservice_key_key");
  // Get data-generated-value-length
  const keyLength = this.getAttribute('data-generated-value-length')
  // Generator
  let text = "";
  const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  for(var i = 0; i < keyLength; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
  // Set generated value in to the input
  input.value = text;
});

<div class="input-group">
  <input type="text" id="webservice_key_key" name="webservice_key[key]" required="required" class="form-control" size="32">
  <span class="input-group-btn ml-1">
    <button id="generate_button" class="btn btn-secondary js-generator-btn" type="button" data-target-input-id="webservice_key_key" data-generated-value-length="32">Generate</button>
  </span>
</div>

How to generate random number?

2 Answers2