Generating and checking random numbers in JavaScript

Question

I have some problems with JavaScript. So far, I have this code:

<!DOCTYPE html>
<html>
<body>

<p>This program generates random numbers from 100 to 999.</p>

<button onclick="maingen()">Start</button> <-- Here's the FUNCTION OF FUNCTIONS..It should generate 3 digits, but only generates 1 :(

<p id="numbers"></p>

<script>
function generate1() {
    var a = Math.floor((Math.random() * 9) + 1);
    document.getElementById("numbers").innerHTML = a; <--generating the first digit (from 1 to 9)
}

function generate2() {
    var b = Math.floor((Math.random() * 9) + 0);
    document.getElementById("numbers").innerHTML = b; <--generating the second digit (from 0 to 9)
}

function generate3() {
    var c = Math.floor((Math.random() * 9) + 0);
    document.getElementById("numbers").innerHTML = c; <--generating the third digit (from 0 to 9)
}
function maingen(){
    generate1();
    generate2();
    generate3();
}


</script>

</body>
</html>

And it doesn't work like I intended to. It should generate a random number from 100 to 999.

(I am generating separate digits because later I will need to check if there are same digits in that number (for example 222)).

So what did I do wrong? Any kind of help would be nice. Thank you.

you're overwriting the innerHTML property with each function call, and you want to append it instead. change the innerHTML = to innerHTML += — user2062950
– user2062950, Commented Mar 24, 2015 at 18:04

kel · Accepted Answer · 2015-03-24 18:44:40Z

2

You could do it using the += in each function or you could simplify it a little more.

function generate1() {
    return Math.floor((Math.random() * 9) + 1);
}

function generate2() {
    return Math.floor((Math.random() * 9) + 0);
}

function generate3() {
    return Math.floor((Math.random() * 9) + 0);
}

function maingen() {
    var a = generate1();
    var b = generate2();
    var c = generate3();

    document.getElementById("numbers").innerHTML = a + '' + b + '' + c;
}

You can also do it like this

function generate_rand() {
    return Math.floor((Math.random() * 9));
}

function maingen() {
    var a = generate_rand() + 1;
    var b = generate_rand();
    var c = generate_rand();

    document.getElementById("numbers").innerHTML = a + '' + b + '' + c;
}

answered Mar 24, 2015 at 18:44

kel

1,6074 gold badges19 silver badges32 bronze badges

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

Comments

Alex Caradonna · Accepted Answer · 2015-03-24 18:06:00Z

1

Not sure if this is your solution, but looks like the functions are misspelled. I see:

function generuoti1() {
    var a = Math.floor((Math.random() * 9) + 1);
    document.getElementById("numbers").innerHTML = a; <--generating the first digit (from 1 to 9)
}

function generuoti2() {
    var b = Math.floor((Math.random() * 9) + 0);
    document.getElementById("numbers").innerHTML = b; <--generating the second digit (from 0 to 9)
}

But then your main function is calling different functions:

function maingen(){
    generate1();
    generate2();
    generate3();
}

I see that one of those functions is spelled right, so that may be why you're only seeing 1 digit. Try fixing your function names for generate1() and generate2().

And then as mentioned in the comments, append your innerHTML with += instead of =

answered Mar 24, 2015 at 18:06

Alex Caradonna

213 bronze badges

5 Comments

lüna Over a year ago

Hehe' sorry, the functions were originally in my language, I've failed to change all the names when I posted here. But, in my original program the names are correct. So I guess it might be something wrong withinnerHTML. Because I'm new to JS. So I have little experience what it does.

Alex Caradonna Over a year ago

Yes, I figured something like that :) try using += to append to innerHTML instead of reassigning. += will add to what exists there, just like aggregating numerical values together!

lüna Over a year ago

Thank you, it worked ! :) One more question. How can I restart this function every time? Because now it generates the numbers...and when I press generate again, it generates on the top. For example: 125 <-- first generation. 125693 <-- when I generate again.

Alex Caradonna Over a year ago

Try using 3 <span>s instead of the p with ids 'a', 'b', 'c' and pass the value to each span individually, as opposed to into the <p>

Alex Caradonna Over a year ago

An upvote for helping you solve this would be much appreciated ;)

Collectives™ on Stack Overflow

Generating and checking random numbers in JavaScript

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related