Why am I not getting the correct random number if I take input from html input tag?

Question

The following function SHOULD generate a random number between the range of max and min. And it does, when I pass numbers directly in the argument.

function randomIntFromRange(min,max)
{
    return Math.floor(Math.random() * (max - min + 1) + min);
}

However when I take input from HTML form, it doesn't generate random value between max and min, rather it generates a random value between 0 and max-min.

Am I doing some obvious stupid mistake? Please help.

var num = 100;

function randomIntFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function trial() {
  num = randomIntFromRange(document.getElementById("a1").value, document.getElementById("a2").value)
  console.log(num);
}

<input id="a1" type="text" value="100">
<input id="a2" type="text" value="150">
<button onclick="trial()">click</button>

Please include the required code to demonstrate the problem _in the question itself_. You can use the stack snippet functionality (see [mcve]) - also your code produces `NaN` not what you think it does. — Jamiec, May 14 '21 at 08:28
@Jamiec sorry, i had uploaded the wrong fiddle. I have corrected the fiddle now. Can you check again? It was my first experience with jsfiddle so apology for the inconvenience — Ritik Sharma, May 14 '21 at 08:29

score 2 · Accepted Answer · edited May 14 '21 at 08:46

First, you need to get the value from the input using .value and then convert it into a number either using

+document.getElementById("a1").value

or

parseInt(document.getElementById("a1").value)

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

Syntax

parseInt(string)
parseInt(string, radix)  // You can use 10 as a radix to parse it into decimal

I've created a button, By clicking on it trial function will get called.

const button = document.querySelector("button");

var num = 100;

function randomIntFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function trial() {
  num = randomIntFromRange(+document.getElementById("a1").value, +document.getElementById("a2").value);
  console.log(num);
}

button.addEventListener("click", trial);

<input id="a1" type="text" value="100">
<input id="a2" type="text" value="150">
<button>get result</button>

If using `parseInt` please remember the radix argument - I think we can assume the user wanted base-10 `parseInt(document.getElementById("a1").value,10)` — Jamiec, May 14 '21 at 08:31

score 1 · Answer 2 · answered May 14 '21 at 08:33

1

The function works... But this

document.getElementById("a1")

Gives you element but you need its value, which is string... You need to convert the string to an integer (same with "a2"):

Number.parseInt(document.getElementById("a1").value)

answered May 14 '21 at 08:33

digitalniweb

838
1
7
15

score 1 · Answer 3 · answered May 14 '21 at 08:35

1

you need to convert the input value to number

parseInt(document.getElementById("a1").value)

another way is to use number() instead of parseInt()

answered May 14 '21 at 08:35

I_love_vegetables

1,575
5
12
26

Why am I not getting the correct random number if I take input from html input tag?

3 Answers3