嘗試向此腳本添加一個按鈕，以便在單擊時生成數字。 我也不希望數字以相同的順序重復

Question

嘗試向此腳本添加一個按鈕，以便在單擊時生成數字。 此外，我不希望數字以相同的順序重復。 我也在 sqaurespace 里面做這個。

我們正在嘗試想出一種方法，通過單擊此按鈕為我們的用戶提供一個用於抽獎的唯一 ID。

非常感謝任何幫助

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 1

稍作修改

 // 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" />

---

重構

 // 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" />