Trying to add a button to this script so it will generate the numbers on click. Also I dont want the numbers to ever repeat in the same order Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Trying to add a button to this script so it will generate the numbers on click. Also I dont want the numbers to ever repeat in the same order without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Trying to add a button to this script so it will generate the numbers on click. Also I dont want the numbers to ever repeat in the same order. Im doing this inside of sqaurespace as well.

We are trying to come up with a way to give our users a unique ID for raffles from clicking this button.

Any help is really appreciated

HTML:

    <h2 style="text-align: center;">Unique ID</h2>
    
    <p id="array_number" style="font-size: 25px; text-align: center;"></p>
    <input id="Generate" type="button" value="Generate" onclick="();" />

Javascript:

    var min = 1;
    var max = 90;
    //Number of numbers to extract
    var stop = 6;
    
    var numbers = [];
    
    for (let i = 0; i < stop; i++) {
      var n =  Math.floor(Math.random() * max) + min;
      var check = numbers.includes(n);
      
      if(check === false) {
        numbers.push(n);
      } else {
        while(check === true){
          n = Math.floor(Math.random() * max) + min;
          check = numbers.includes(n);
            if(check === false){
              numbers.push(n);
            }
         }
      }
    }
    
    sort();
    
    //Sort the array in ascending order
    function sort() {
      numbers.sort(function(a, b){return a-b});
      document.getElementById("array_number").innerHTML = numbers.join(" - ");
    }

Answer

Modified a bit

// Get DOM
var button = document.querySelector('#Generate');

// I put most of your code into one function
function GenerateRandomNums() {
  var min = 1;
  var max = 90;
  var stop = 6;

  var numbers = [];

  for (let i = 0; i < stop; i++) {
    var n = Math.floor(Math.random() * max) + min;
    var check = numbers.includes(n);

    if (check === false) {
      numbers.push(n);
    } else {
      while (check === true) {
        n = Math.floor(Math.random() * max) + min;
        check = numbers.includes(n);
        if (check === false) {
          numbers.push(n);
        }
      }
    }
  }

  numbers.sort(function(a, b) {
    return a - b
  });
  document.getElementById("array_number").innerHTML = numbers.join(" - ");

  return numbers;
}

// When the button is clicked, the function is executed
button.addEventListener('click', GenerateRandomNums);
<h2 style="text-align: center;">Unique ID</h2>

<p id="array_number" style="font-size: 25px; text-align: center;"></p>

<!-- Removed onClick -->
<input id="Generate" type="button" value="Generate" />

Refactored

// GET THE BUTTON
const button = document.querySelector('#generate-button');

// GENERATE A RANDOM NUMBER FUNCTION
// I made a function for a random number that can be used in other functions
// Defaut min = 1, max = 90
function generateRandomNumber(min = 1, max = 90) {
  return Math.floor(Math.random() * max) + min;
}

// CREATE UNIQUE IDS FUNCTION
function createUniqueIds(e) {
  e.stopPropagation();

  // Get the <p>
  const uniqueIds = document.querySelector('#unique-ids');
  
  // Create an array with 6 empty elements
  let ids = Array(6);
  let n;

  // For loop that iterates up to the length of the array (6 times)
  for (let i = 0; i < ids.length; i++) {
    do {
      n = generateRandomNumber();
    } while (ids.includes(n));

    ids[i] = n;
  }

  // Sort and join the array
  let numString = ids.sort((a, b) => a - b).join(' - ');
  
  // Update the text inside of the <p>
  uniqueIds.textContent = numString;
}

// CLICK EVENT
// When the button is clicked, createUniqueIds() is executed
button.addEventListener('click', createUniqueIds, false);
<h2 style="text-align: center;">Unique ID</h2>

<p id="unique-ids" style="font-size: 25px; text-align: center;">Loading...</p>
<input id="generate-button" type="button" value="Generate" />
We are here to answer your question about Trying to add a button to this script so it will generate the numbers on click. Also I dont want the numbers to ever repeat in the same order - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji