HTML JavaScript random number select

Question

I have been trying to get a random number generator for the numbers to be between the two inputs. I have a code

<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>

<script>
function myFunction() {
    var x = document.getElementById("randnum")
    x.innerHTML = Math.floor((Math.random() * 'low') + 'high');
}
</script>

As you would have noticed, I have the javascript in the one code.

where I put in 'low' and 'high' works with a fixed number

gavgrif · Accepted Answer · 2017-07-21 10:09:42Z

3

You need to get the value of the inputs and apply them to the calculations. - note that i am using parseInt() to convert the input values to numbers. Also - using 1 will as the low value will always yield are result of 10 since your getting the math.floor - which will equate to 0 - so 0 + 10 = 10.

Based on @Quentins comment - i alered the caluclation to suit your numbers.

function myFunction() {
    var x = document.getElementById("randnum");
    var high = parseInt(document.getElementById("high").value);
    var low = parseInt(document.getElementById("low").value);
    x.innerHTML = Math.floor(Math.random()*(high-low+1)+low)
}

<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>

edited Jul 21, 2017 at 10:09

answered Jul 21, 2017 at 10:03

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Quentin Over a year ago

The correct formula is : Math.floor(Math.random()*(max-min+1)+min);

gavgrif Over a year ago

thanks @Quentin - answer amended to suit your calculation - cheers.

Marko Savic · Accepted Answer · 2017-07-21 10:16:29Z

0

<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>

<script>
myFunction = () => {
let min = parseInt(low.value, 0);
let max = parseInt(high.value, 0);

let x = document.getElementById("randnum")
x.innerHTML = Math.floor(Math.random() * (max - min)) + min;
}
</script>

answered Jul 21, 2017 at 10:16

Marko Savic

2,4492 gold badges17 silver badges28 bronze badges

Comments

Mahbubul Islam · Accepted Answer · 2017-07-21 10:05:42Z

0

I think this will help.

<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>

<script>
function myFunction() {
    var x = document.getElementById("randnum")
    var low = document.getElementById("low").value;
    var high = document.getElementById("high").value;
    x.innerHTML = Math.floor((Math.random() * low) + high);
}
</script>

answered Jul 21, 2017 at 10:05

Mahbubul Islam

1,0181 gold badge12 silver badges24 bronze badges

2 Comments

MULTI Team Over a year ago

Your answer is correct, however, i had to change "high" to "low and vice versa for it to work.

MULTI Team Over a year ago

In addition to my last comment, I can't seem to set the lowest number, only the highest

VenkyDhana · Accepted Answer · 2017-07-21 10:40:01Z

0

var max = parseInt($("#high")[0].value);
var min = parseInt($("#low")[0].value);
x.innerHTML = Math.floor(Math.random() * max) + min;

edited Jul 21, 2017 at 10:40

answered Jul 21, 2017 at 10:05

VenkyDhana

9056 silver badges19 bronze badges

1 Comment

VenkyDhana Over a year ago

@MULTITeam I have modified the code. Can you try now? Simplest Formula is (Math.random() * max) + min

tim1234 · Accepted Answer · 2017-07-23 06:49:29Z

0

First, in (Math.random() * 'low') + 'high', low and high are not really the integer values.

Second, a very IMPORTANT issue others did not mention is that Math.random() returns a double value between 0 and 1. If you follow some of the other answers, the random number will always be 0.

use this:

<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" 
value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" 
value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>

<script>
function myFunction() {
var x = document.getElementById("randnum")
var low = document.getElementById("low").value;
var high = document.getElementById("high").value;
var random = Math.random();
x.innerHTML = Math.floor(random * (high-low) + high);
}
</script>

edited Jul 23, 2017 at 6:49

answered Jul 21, 2017 at 10:03

tim1234

3143 silver badges12 bronze badges

3 Comments

MULTI Team Over a year ago

If I do what you suggest, it won't work. But I can help you with this: If I take away a bracket, it will show 010. If I replace from the first 'math' it comes up without a whole number

MULTI Team Over a year ago

Thank you for your edit. Your answer is correct, but how do I clean out the '0's at the end of the random number?

tim1234 Over a year ago

@MULTITeam Just a typo and I corrected the code. When I posted mine, I found some of the answers did not solve the second issue. But for now, Marko Savic and gavgrif both suggested the correct answers.

Collectives™ on Stack Overflow

HTML JavaScript random number select

5 Answers 5

2 Comments

Comments

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related