Having trouble generating 10 random integers from 1-100 on a mousedownevent

Question

I'm having trouble generating 10 random integer from 1-100 on a mousedownevent. Also I need to display each in a table row, I'm a new to computer programming and I don't know what the mistake that I am committing.

Here's my code:

function process() {
    'use strict';

    var ara = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var index;
    var output = '<tr>';

    for (var i = 0; i < 1 0; i++) {
        index = Math.floor(Math.random() * 100);
        output += '<td>' + ara[index] + '</td>';
    }

    output += '</tr>';
    document.getElementById('numbers').innerHtML = output;
}

function init() {
    'use strict';

    document.getElementById('showarray').onmousedown = process;
} // End of init() function

window.onload = init;

The Id numbers is a table tag and the id show array is the H3 tag I have to click to get the 10 integers

and here's the HTML

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>assignment2.html</title>
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/styles.css">
    </head>

    <body>
        <!-- assignment2.html -->
        <h2>10 Random Integers from 1 to 100</h2>

        <h3 id='showarray'>Mouse down here to show integers in table below</h3>

        <table id="numbers" border="2"></table>
        <span id="show5th">The fifth element is ?</span>

        <script src="js/assignment2.js"></script>
    </body>

</html>

jsfiddle with 10 and innerHTML fixed

Does it really say `i < 1 0 ;` with space between the 1 and 0? Because with space, that's not a ten, it is a one and a zero. Make it a `10` — Paul, Sep 01 '13 at 05:07
Can you also post the HTML? You can click edit, and copy/paste it. — Paul, Sep 01 '13 at 05:12
The t in innerHtML is lowercase. This may also be a problem. — Austen, Sep 01 '13 at 05:24
ok I posted the HTML i fixed the error's you guy's told me, but still not working. — Mansukh Singh, Sep 01 '13 at 06:53
As reference to random number generation see: [Generating random numbers in Javascript in a specific range?](http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range/1527820#1527820) — Xotic750, Sep 02 '13 at 10:53

Bart Calixto · Answer 1 · 2013-09-02T03:33:29.480

Generate 10 randoms numbers from 1 to 100;

var numbers = [];
while (numbers.length <10) {
    // ParseInt for rounding. Real random numbers are 99 starting on 1.
    var number = parseInt(Math.random() * 99)+1,10); 
    // save the number into an array and avoid duplicated.
    if (numbers.indexOf(number) === -1 ) {
        numbers.push(number);
    }
}

Display the numbers in a table cell

If you are using jQuery, this will be easy.

// creates table row element
var row = $('<tr>');
$.each(numbers, function(i) {
    // creates new table cell element
    var cell = $('<td>'); 
    cell.text(i);
    // append cell into row without inserting into the DOM.
    cell.append(row);
});    
// appends the resulting row and it's content into the DOM element with an id of `#target`
$('#target').append(row);

If you are NOT using jQuery you can mix this code with the provided by Xotic

To make it happen on mousedown I used click but if you really need mousedown, change it as you pleased.

Wrap the above code into 2 functions, let say:

var generateRandomNumbers = function () {
    var numbers = [];
    while (numbers.length <10) {
        var number = Math.ceil(Math.random() * 100);
        if (numbers.indexOf(number) === -1 ) {
            numbers.push(number);
        }
    }
    return numbers;
}

var appendNumbersToDom(numbers, target) {
    // you may want to check for non valid paramenters here
    var row = $('<tr>';
    $.each(numbers, function(i) {
        var cell = $('<td>');
        cell.text(i);
        cell.append(row);
    });    
    $(target).append(row);    }

and the caller

$('#showarray').on('click', function() {
    appendNumbersToDom(generateRandomNumbers, '#target');
});

This doesn't generate `integers` as requested in the OP's post. — jfriend00, Sep 01 '13 at 05:53

score 0 · Answer 2 · edited Sep 02 '13 at 11:02

0

Thanks to the input of tryingToGetProgrammingStraight, I was able to find out that ara wasn't necessary for the output. Just index alone was good enough to generate a random number from 1 to a 100

function process() {
    'use strict';

    var ara = [1, 2, 3, 4, 5, 6, , 7, 8, 9, 10];
    var index;
    var output = '<tr>';

    //Start of loop
    for (var i = 0; i < 10; i++) {
        index = Math.floor(Math.random() * 101);
        output += '<td>' + +index + '</td>';

    }

    output += '</tr>';
    document.getElementById('numbers').innerHTML = output;
}

function init() {
    'use strict';

    document.getElementById('showarray').onmousedown = process;
} // End of init() function

window.onload = init;

edited Sep 02 '13 at 11:02

Xotic750

22,914
8
57
79

answered Sep 02 '13 at 03:02

Mansukh Singh

31
1
4

You will get a number between 0 and 100 with this. Consider [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) returns `0` – Xotic750 Sep 02 '13 at 10:21
I noticed this, is there an alternate to Math.random ? or a way I can fix that. – Mansukh Singh Sep 03 '13 at 03:21
Yes, I have given you a reference above, and in the main question comments and demonstrated it in my answer too. – Xotic750 Sep 03 '13 at 10:39

Math chiller · Answer 3 · 2013-09-01T05:43:12.413

-1

for(var i= 0; i < 1 0; i++) { is supposed to be for(var i= 0; i < 10; i++) { no space between 1 and 0

also and more important ara[index] should be index, why do you even have ara? if its for the loop then

its unnecessary
then use for(var i in ara) instead of for(var i= 0; i < 10; i++) {

anyway what do you want and what are you getting? please clarify.

edited Sep 01 '13 at 05:43

answered Sep 01 '13 at 05:37

Math chiller

4,123
6
28
44

TryingToGetProgramming thanks for your input. I didn't quite get your second point. But well I need to get random integers in a table with one row when I click on the H3 text. so when I click it a table like this should came up random integer 1 random integer 2>... and so on till there is 10. – Mansukh Singh Sep 01 '13 at 08:09
@SimonHerrera then use `ara[i] + " " + index`. open your console the way its currently written that line should produce a error, and thats because there is no `ara[index]`. my second point is that its a better way and the proper way to loop through arrays (which you said you arent doing) – Math chiller Sep 01 '13 at 08:15
Note: Don't use `for..in` loops for iterating arrays. – Xotic750 Sep 01 '13 at 08:46
@Xotic750 ummm, y not as far as i know thats the way things are done, please explain yourself, and/or include a source. – Math chiller Sep 01 '13 at 08:52
@SimonHerrera btw if i answered your question plz 1+ and/or mark as answered. – Math chiller Sep 01 '13 at 08:53
@tryingToGetProgramming Please read [Why is using “for…in” with array iteration such a bad idea?](http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea) instead use `while`, `for` or `forEach`. Hope that helps you understand. – Xotic750 Sep 01 '13 at 08:58
Thank you so much @tryingToGetProgrammingStraight, I was able to solve it thank's to yoru advice the only thing I had to change tho, was the math.random() * 10) and I mixed the orders of the arrays so the results would be more random. I would give you a 1+ but I don't have enough reputation, but thanks. – Mansukh Singh Sep 02 '13 at 02:30
@SimonHerrera you can accept my answer that's better than a +1, and glad to be of help. thats what we do here, help one another, and argue, OK mainly argue. – Math chiller Sep 02 '13 at 02:38

Having trouble generating 10 random integers from 1-100 on a mousedownevent

3 Answers3