CODEWITHSUNDEEP
javascripthtmlrandomnumbers
Plamen Tsanev
Plamen Tsanev

Reputation: 49

Javascript random number generator in range, going below and above the given range

I have been trying to make a random number generator, with a given range, thought it would be easy and then without any logical reason the random number isnt in any way affected by the given maximum and minimum range. Please help. Here is the code:

<!DOCTYPE html>
          <html>
           <head>
             <style>
                .elements {
                text-align: center;
                 }

           .random {
                margin-top: 100px;
                width: 275px;
                height: 200px;
                font-size: 50px;
                text-align: center;
            }

            .range {
                margin: 35px 25px;
                width: 100px;
                height: 100px;
                text-align: center;
                font-size: 30px;
            }

            .generate {
                margin-top: 50px;
                width: 250px;
                height: 35px;
                font-size: 20px;
            }
        </style>

        <script language="javascript" type="text/javascript">
            function rand()
            {
                var max = document.getElementById("max").value;
                var min = document.getElementById("min").value;

                var output = document.getElementById("output");

                var random = Math.floor(Math.random() * max + min);

                output.value = random;
            }
        </script>

    </head>
    <body>
        <div class="elements">

        <input type="text" class="random" id="output">
        <br>
        <input type="button" class="generate" value="Generate random number" onclick="rand();">
        <br>
        <h1>Maximum Number</h1>
        <input type="text" class="range" id="max">
        <h1>Minimal Number</h1>
        <input type="text" class="range" id="min">

        </div>
    </body>
</html>

Upvotes: 3

Views: 4591

Answers (4)

Tuychiev Toir
Tuychiev Toir

Reputation: 370

using this code:

// the initial seed
Math.seed = 6;

// in order to work 'Math.seed' must NOT be undefined,
// so in any case, you HAVE to provide a Math.seed
Math.seededRandom = function(max, min) {
    max = max || 1;
    min = min || 0;

    Math.seed = (Math.seed * 9301 + 49297) % 233280;
    return Math.floor(min + (Math.seed / 233280) * (max - min));
}
var res = Math.seededRandom(100,-100)
console.log(res)

or try it yourself

http://indiegamr.com/generate-repeatable-random-numbers-in-js/

Upvotes: 0

Philip
Philip

Reputation: 3

Add a code block that checks if the random number generated falls in the range specified. If it doesn't loop through random number generation until the condition test fails;

function rand() {
  var max = document.getElementById("max").value;
  var min = document.getElementById("min").value;

  var output = document.getElementById("output");


  var random = Math.floor(Math.random() * max + min);

  while (random > max || random < min) {
    random = Math.floor(Math.random() * max + min);
  }

  output.value = random;

}
.elements {
  text-align: center;
}

.random {
  margin-top: 100px;
  width: 275px;
  height: 200px;
  font-size: 50px;
  text-align: center;
}

.range {
  margin: 35px 25px;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 30px;
}

.generate {
  margin-top: 50px;
  width: 250px;
  height: 35px;
  font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <input type="text" class="random" id="output">
  <br>
  <input type="button" class="generate" value="Generate random number" onclick="rand();">
  <br>
  <h1>Maximum Number</h1>
  <input type="text" class="range" id="max">
  <h1>Minimal Number</h1>
  <input type="text" class="range" id="min">

after that, you can then assign the its value to output.

Upvotes: 0

set0gut1
set0gut1

Reputation: 1672

  1. document.getElementById("max").value is string, so now Math.random() * max + min is float * string + string, which append min value as string. parseInt will resolve this issue.
  2. Math.random() * max + min is incorrect. Math.random() * (max - min + 1) + min is right.

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370809

You need to multiply Math.random() by the length of your range, not by the maximum value in the range.

const getRandom = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
Array.from({ length: 20 }, () => console.log(getRandom(0, 2)));

Upvotes: 3

Related Questions