Generating Javascript random number into HTML

Question

Need help with Javascript to generate number in HTML. I'm close but can't get it to quite work. Help would be appreciated.

http://jsfiddle.net/xmPgR/251/

function getNumber() {
    var minNumber = 0; // The minimum number you want
    var maxNumber = 100; // The maximum number you want
    var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber); // Generates random number
    $('#myNumber').html(randomnumber); // Sets content of <div> to number
    return false; // Returns false just to tidy everything up
}

window.onload = getNumber; // Runs the function on click
document.getElementById("yourNumber").innerHTML = randomnumber;

<div id="myNumber"></div>
<p id="yourNumber">
</p>

Suren Srapyan · Accepted Answer · 2017-09-06 13:13:34Z

3

Your onload works after the next statement, because it works asynchronously. And besides this, you use a randomnumber outside from it's scope, where it is not accessible.

So I suggest you to return the randomnumber from the function and use that function in the onload event handler. Inside that handler call your function, get the number and assign to your element's text.

And also if your getNumer's logic is to return the number, don't assign anything inside it, just return the number. It's responsibility is to return a random number. Pass the range to it, don't hard code: in another place you can need a random number in the different range. Other logic implement outside of that function.

function getRandomNumber(minRange, maxRange) {
    return Math.floor(Math.random() * (maxRange + 1) + minRange);
}

window.onload = function() {
    const rand = getRandomNumber(0, 100);
    document.getElementById("yourNumber").innerHTML = rand;
    $('#myNumber').html(rand);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myNumber"></div>
<p id="yourNumber"></p>

edited Sep 6, 2017 at 13:13

answered Sep 6, 2017 at 12:49

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

1 Comment

Suren Srapyan Over a year ago

@Bylonb If this helps you, you accept it and help others to find it

Jonas · Accepted Answer · 2017-09-06 12:53:01Z

2

Here you go:

function getNumber() {
    var minNumber = 0; // The minimum number you want
    var maxNumber = 100; // The maximum number you want
    var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber); // Generates random number
    document.getElementById("myNumber").innerHTML = randomnumber; // Sets content of <div> to number
    return false; // Returns false just to tidy everything up
}

window.onload = getNumber; // Runs the function on click

<div id="myNumber"></div>
<p id="yourNumber">
</p>

answered Sep 6, 2017 at 12:53

Jonas

2,2691 gold badge20 silver badges40 bronze badges

Collectives™ on Stack Overflow

Generating Javascript random number into HTML

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related