0

As a little hobby i am creating a random number generator tool using the javascript math.random script and an html form that asks for the minimum number and maximum number. But i am experiencing a problem where sometimes the minimum number is set to zero instaid of what the user inputted. Here is my html code:

<form id="form" onsubmit="return false;">
<input type="text" id="minNumber" value="Minimum number" onfocus="if         (this.value == 'Minimum number') {this.value = '';}" onblur="if (    this.value == '') " />
<input type="text" id="maxNumber" value="Maximum number" onfocus="if        (this.value == 'Maximum number') {this.value = '';}" onblur="yes" />
<input type="submit" onclick="getNumber()" value="Get random number">
</form>

And this is my JavaScript code:

function getNumber() {
var minNumber = document.getElementById("minNumber").value;
var maxNumber = document.getElementById("maxNumber").value;
var randomnumber = Math.floor(Math.random() *( + maxNumber) + minNumber);
alert("Your random number is: " + randomnumber);
}

I have tried several fixes including:

  • Removing some unnecisary spaces, +'s, and 1's
  • adding more variables

Any help would be appreciated. Thanks!

Rob
  • 14,746
  • 28
  • 47
  • 65
  • How you discovered this error? – benny-ben Jan 18 '18 at 19:50
  • I tried but it seems to work properly – benny-ben Jan 18 '18 at 19:59
  • It looks like you're having that problem because I also tried it and it generated a number less than the minNumber entered. Aren't you expecting the generated number to be between the minNumber and maxNumber? – olucube.com Jan 18 '18 at 20:49
  • Can you tell us what input into those fields reproduces the issue? Without knowing that it's unlikely anybody can help. – Jack Jan 18 '18 at 21:28
  • 1
    For formula is bogus anyway, you need to multiply by the _difference_ between max and min - see MDN for proper examples, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_number_between_two_values – CBroe Jan 18 '18 at 23:07
  • Your algorithm doesn't make sense. Did you search for using math.random to get a number range? – Ruan Mendes Jan 18 '18 at 23:13
  • 1
    Wtf are you guys doing? The duplicate is wrong and -1 with correct answer. OMG – rafaelcastrocouto Jan 19 '18 at 01:16
  • 1
    @rafaelcastrocouto I fixed the dupe link. I agree, it was completely off for no reasons, but obviously, this question is still a many duped. – Kaiido Jan 19 '18 at 01:53
  • Thx for cleaning up the mess guys! – rafaelcastrocouto Jan 19 '18 at 11:21

1 Answers1

1

This example returns a random integer between the specified values. The value is no lower than min (or the next integer greater than min if min isn't an integer), and is less than (but not equal to) max.

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

It might be tempting to use rounding to accomplish that, but doing so would cause your random numbers to follow a non-uniform distribution, which may not be acceptable for your needs.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values_inclusive

You should replace all "inline events" with addEventListener https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

function getNumber() {
  var minNumber = Number(document.getElementById("minNumber").value);
  var maxNumber = Number(document.getElementById("maxNumber").value);
  var randomnumber = Math.floor((Math.random() *  (maxNumber - minNumber)) + minNumber);
  document.getElementById("output").innerText = "Your random number is: " + randomnumber;
}
<form id="form" onsubmit="return false;">
  <input type="text" id="minNumber" value="2" onblur="getNumber()" />
  <input type="text" id="maxNumber" value="10" onblur="getNumber()" />
  <input type="submit" onclick="getNumber()" value="Get random number">
</form>
<span id="output"></span>
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • Does this solve the problem, or are you mentioning random improvements to his code? An answer should have an explanation – Ruan Mendes Jan 18 '18 at 23:09
  • I see that you actually showed the right code, but it would still need an explanation, maybe if you showed just the changed line. Talking about event handlers instead derails the point of your answer – Ruan Mendes Jan 18 '18 at 23:21
  • You shouldn't give minus points just because you don't agree with a code explanation. I'm pretty sure that Elijah (and anyone else coding this) will understand it just by reading the code. And you can add your own complete answer if you really think it's so important. – rafaelcastrocouto Jan 19 '18 at 01:19
  • 1
    Maybe Elijah will understand, but from his initial attempt, he maybe won't, he'll just copy paste it and won't learn anything. You're right that I shouldn't downvote it, but it encouraged you to add information. Now I took it back because it's a nice answer. – Ruan Mendes Jan 19 '18 at 05:16
  • 1
    Thanks and you are right, I did updated the answer with more info! – rafaelcastrocouto Jan 19 '18 at 11:20
  • 1
    Thanks! This works now – Elijah Reardon Jan 19 '18 at 16:26