lotto generators generating from lowest to highest

Question

i am working on a lottery generator and i currently have a code that will generate 6 random numbers from 1-9 by clicking the button. But, its not in order my numbers. I want it from least to greatest. I also have a textarea that says numbers of digits. So for number of digits, if I put 3, it will generate 3 numbers. Currently my button click only generates 6. For my code I currently got a html and javascript file.

    let btn = document.getElementById("btnSend");
    let luckynumbers = document.querySelector("#result");

    function lottonumbers(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }

    function showRandomNUmbers() {
        var numbers = [],
            random;

        for (var i = 0; i < 6; i++) {

            random = lottonumbers(1, 49);

            numbers.push(random);

        }

        luckynumbers.value = numbers.join("  ,  ");

    }
    btn.onclick = showRandomNUmbers;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Lotto</title>
    <link rel="stylesheet" href="css/main.css" />

    <style>

    </style>
</head>
<body>
    <div id="randomNumbers" class="page">
        <header>
            <h1>$ LOTTO NUMBERS $</h1>
        </header>
        <section class="main">
            <p class="formBox">
                <label for="digits">Number of Digits</label>
                <input id="digits" type="number" max="10" min="1" placeholder="6" />
            </p>
            <p class="formBox">
                <label for="max">Range</label>
                <span>1 to </span><input id="max" type="number" min="2" max="99" placeholder="49" />
            </p>
            <p class="formBox buttons">
                <button id="btnSend">Generate Numbers</button>
            </p>
        </section>
    </div>
    <div id="list" class="page">
        <header>
            <h1>YOUR LUCKY NUMBERS!</h1>
        </header>
        <section class="main">
            <p id="errorMessage"></p>

            <output id="result">Press "Generate Numbers" for your lucky lottery numbers!</output>
<!--
            <ul id="result">
                 display the generated numbers from the server 
            </ul>
-->
            <p>
                <button onclick id="btnBack">Start Again</button>
            </p>

            <p id="demo"></p>
        </section>
    </div>
    <script src="js/main.js"></script>
</body>
</html>

[Array.sort()](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) — Filburt, Nov 06 '18 at 19:57

score 0 · Answer 1 · answered Nov 06 '18 at 20:06

Just above this part of your script:

luckynumbers.value = numbers.join("  ,  ");

Try adding these lines:

numbers.sort(function(a,b) {
    if ( a < b )
        return -1;
    if ( a > b )
        return 1;
    return 0;
    });

That should sort your output fra lowest to highest value. Code is from another thread here.

Made a fiddel for you here: https://jsfiddle.net/zinen2/5730bejf/

Joffutt4 · Accepted Answer · 2018-11-06T20:19:33.770

So there are two things here. You need to sort the array of generated numbers to have them display from low to high. I have added the function sortfunction to do exactly that. You need to take this function and pass it into the numbers.sort() call to produce the sorted numbers.

Also, you had never grabbed the number of digits from the page so I added into the showRandomNUmbers function grabbing the value of the digits field to correctly display only the desired number of digits.

let btn = document.getElementById("btnSend");
let luckynumbers = document.querySelector("#result");

function lottonumbers(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

function showRandomNUmbers() {
  var numbers = [],
    random;

  let digits = document.getElementById("digits");
  let numDigits = digits.value;
  if (digits.value == "") {
    numDigits = digits.placeholder;
  }
  for (var i = 0; i < numDigits; i++) {

    random = lottonumbers(1, 49);

    numbers.push(random);

  }
  numbers = numbers.sort(sortfunction);

  luckynumbers.value = numbers.join("  ,  ");

}

function sortfunction(a, b) { //causes an array to be sorted numerically and ascending
  return (a - b)
}
btn.onclick = showRandomNUmbers;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>AJAX Lotto</title>
  <link rel="stylesheet" href="css/main.css" />

  <style>

  </style>
</head>

<body>
  <div id="randomNumbers" class="page">
    <header>
      <h1>$ LOTTO NUMBERS $</h1>
    </header>
    <section class="main">
      <p class="formBox">
        <label for="digits">Number of Digits</label>
        <input id="digits" type="number" max="10" min="1" placeholder="6" />
      </p>
      <p class="formBox">
        <label for="max">Range</label>
        <span>1 to </span><input id="max" type="number" min="2" max="99" placeholder="49" />
      </p>
      <p class="formBox buttons">
        <button id="btnSend">Generate Numbers</button>
      </p>
    </section>
  </div>
  <div id="list" class="page">
    <header>
      <h1>YOUR LUCKY NUMBERS!</h1>
    </header>
    <section class="main">
      <p id="errorMessage"></p>

      <output id="result">Press "Generate Numbers" for your lucky lottery numbers!</output>
      <!--
            <ul id="result">
                 display the generated numbers from the server 
            </ul>
-->
      <p>
        <button onclick id="btnBack">Start Again</button>
      </p>

      <p id="demo"></p>
    </section>
  </div>
  <script src="js/main.js"></script>
</body>

</html>

Thanks! It worked, im very new to coding, but i have another question. Do you know how can I make it so when I press generate it changes wipes out the current screen and will just display the numbers with a start again button? And if i press start again it will go back to the main page? — Zulrahking, Nov 06 '18 at 20:26
I would start looking into how to perform navigation between multiple pages then if that is the behavior you would like. Otherwise you will need to capture the contents of the page and programmatically change them based on button pushes. Also, don't forget to accept this answer if it solved your question. — Joffutt4, Nov 06 '18 at 20:35

lotto generators generating from lowest to highest

2 Answers2