Random numbers java script

Question

So I build this web page and worth a function of 6 random numbers in a 6 little boxes. Every number get a box and sometime I receive in two boxes the same number and I need this to be not equal. I need different number on all of the boxes. from 1 to 37. Big tnx to everyone!!! This is the function and all of the css and html design.

function six() {
  var s = document.getElementsByClassName("trim");
  for (var i = 0; i < s.length; i++) {
    console.log(s[i]);
    s[i].innerHTML = Math.floor((Math.random() * 37) + 1);
  }
}

.lotobox {
  width: 550px;
  height: 100px;
  border: 1px solid black;
  background-color: #0080ff;
  color: #E52A34;
  font-size: 25px;
  text-align: center;
  margin: auto 0;
  padding-bottom: 15px;
}

.numbers {
  width: 550px;
  height: 530px;
  border: 1px solid black;
  background-color: darkcyan;
  color: black;
  text-align: center;
}

th {
  border: 4px solid black;
  width: 70px;
  height: 100px;
  padding: 10px 20px 10px;
  background-color: gray;
  color: black;
  text-align: center;
  font-family: vardana;
  font-size: 40px;
}

td {
  text-align: center;
}

#button {
  width: 110px;
  height: 40px;
  margin: 0 auto;
}

.table1 {
  margin: 0 auto;
}

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

<head>

  <meta charset="UTF-8">
  <title>Loto Aplication</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>
  <div class="lotobox">
    <h1>Loto Box</h1>
  </div>
  <div class="numbers">
    <br><br>
    <table class="table1">
      <tr>
        <th class="trim"></th>
        <th class="trim"></th>
        <th class="trim"></th>
      </tr>
      <tr>
        <th class="trim"></th>
        <th class="trim"></th>
        <th class="trim"></th>
      </tr>
    </table>
    <br>
    <button id="button" onclick="six()">go!</button>
  </div>
</body>

</html>

Why don't you maintain a list of numbers that have already been used and check against that each time you generate a random number? If you just generate random numbers it's safe to assume you will eventually generate the same number again. — Michael Platt, Nov 21 '17 at 18:35

score 0 · Answer 1 · answered Nov 21 '17 at 18:36

The math.random() function isn't "seeded"- thus likely returning the same value each time you load the page and call the function as you've exhibited.

Check out this previous StackOverflow thread about writing your own javascript random seed generator: Seeding the random number generator in Javascript

You can use that in conjunction with the array/checker functionality suggested in the comments to ensure unique numbers.

score 0 · Answer 2 · answered Nov 21 '17 at 18:45

Create an array of the numbers from 1-37 randomly sorted then pop() the last one from array in your loop. pop() removes the last elemtn of an array so you will never have duplicates

const nums = new Array(37).fill()
  .map((_, i) => i + 1)
  .sort(() => Math.random() - .5)

function six() {
  var s = document.getElementsByClassName("trim");
  for (var i = 0; i < s.length; i++) {       
    s[i].innerHTML = nums.pop();
  }
}

.lotobox {
  width: 550px;
  height: 100px;
  border: 1px solid black;
  background-color: #0080ff;
  color: #E52A34;
  font-size: 25px;
  text-align: center;
  margin: auto 0;
  padding-bottom: 15px;
}

.numbers {
  width: 550px;
  height: 530px;
  border: 1px solid black;
  background-color: darkcyan;
  color: black;
  text-align: center;
}

th {
  border: 4px solid black;
  width: 70px;
  height: 100px;
  padding: 10px 20px 10px;
  background-color: gray;
  color: black;
  text-align: center;
  font-family: vardana;
  font-size: 40px;
}

td {
  text-align: center;
}

#button {
  width: 110px;
  height: 40px;
  margin: 0 auto;
}

.table1 {
  margin: 0 auto;
}

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

<head>

  <meta charset="UTF-8">
  <title>Loto Aplication</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>
  <div class="lotobox">
    <h1>Loto Box</h1>

  </div>
  <div class="numbers">

    <br><br>

    <table class="table1">
      <tr>
        <th class="trim"></th>
        <th class="trim"></th>
        <th class="trim"></th>
      </tr>
      <tr>
        <th class="trim"></th>
        <th class="trim"></th>
        <th class="trim"></th>
      </tr>
    </table>
    <br>
    <button id="button" onclick="six()">go!</button>
  </div>

</body>

</html>

Random numbers java script

2 Answers2