how to generate random numbers on click?

Question

ultmt.punisher 0 Junior Poster in Training

9 Years Ago

I want to make a system that generate numbers on click,

I have numbers from 1 to 100 like

M-3134
A-3133
U-3132 and so on.

and I want to put all my these numbers in array and want to show using button randomally, upto 8 numbers or 10.

and when 1 number is showed in first result for example M-3134 if showed, it should colored red on next generate.
and so on.

any idea how to do this?

javascript jquery php

4 Contributors
18 Replies
2K Views
10 Hours Discussion Span
Latest Post 9 Years Ago Latest Post by ultmt.punisher

All 18 Replies

diafol

9 Years Ago

This doesn't make much sense. Is there a connection between 100 numbers and the ids you show. For example, are these ids already generated and you just want to pick one at random from the array?

Shuffle the numbers 0-99 in an array and loop over them - display the item of the array, e.g. alert (items[cnt]) or however you're displaying it. Increment the counter (cnt) every time the button is clicked to display the next item. This will not give you duplicates.

If you want duplicates (reds), then you could generate a random number (within 0-99) every time you click a button and then display that array item. In order to see if that item has already been displayed, you could keep an "used" array and dump the random numbers, as they come up, into it. It's just a matter of checking the "used" array for a number to decide whether the value should be red or not.

diafol

9 Years Ago

I don't think you understood me and I'm still having trouble understanding you. I have an example somewhere - I'll see if I can find it and post it back - if not, perhaps I'll knock up a quick one.

BTW - this will be basic javascript, not jQuery or anything else?

diafol

9 Years Ago

Here's a simple quick script. MOdify as required if it's any use...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onClick="displayValue();" id="surprise">SURPRISE!</button>
<button onClick="resetAll();">RESET!</button>

<div id="answers"></div>
<script>

var data = ["M-3100","M-7333","M-0123","M-9087","M-2758","M-1267","M-3234","M-3198","M-3188","M-3170","M-3106"];
var div = document.getElementById('answers');
var current = 0;

//http://jsfromhell.com/array/shuffle
function shuffle(o){ 
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

shuffle(data);

function displayValue()
{
    if(current == data.length)
    {
        document.getElementById('surprise').disabled = true;
        return; 
    }
    div.innerHTML = div.innerHTML + data[current] + "<br>";
    current++;
}

function resetAll()
{
    current = 0;
    shuffle(data);
    div.innerHTML = '';
    document.getElementById('surprise').disabled = false;
}
</script>
</body>
</html>

Edited 9 Years Ago by diafol

ultmt.punisher commented: its somehow useful. +1

JorgeM 958 Problem Solver

9 Years Ago

Change the option for JS.

4e09a3baa7e1fabf65737274fd79445c

diafol

9 Years Ago

<?php
    if(isset($_FILES['datafile']['tmp_name']))
    {
        $lines = file($_FILES['datafile']['tmp_name'],FILE_IGNORE_NEW_LINES);
        $data = json_encode($lines);
    }

?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#answers span{
    color: red; 
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
    <input type="file" name="datafile" />
    <input type="submit" name="submit" value="Load Form" />
</form>
<br />
<label for="retrieveNum">Number to be drawn:</label>
<input id="retrieveNum" type="number" value="8" onChange="changeAmount(this.value);" />
<br />
<button onClick="displayValue();" id="surprise">SURPRISE!</button>
<button onClick="resetAll();" id="reset">RESET</button>

<div id="answers"></div>
<script>
    var displayAmount;
    var data = <?php echo $data;?>;

    var div = document.getElementById('answers');
    var current;
    var trash;


    //http://jsfromhell.com/array/shuffle
    function shuffle(o){ 
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };

    function changeAmount(amt)
    {
        displayAmount = amt;    

    }

    function displayValue()
    {
        if(trash.length == data.length)
        {
            alert("All values drawn\nOriginal Data: " + data + "\nUsed Data: " + trash);
            document.getElementById("surprise").disabled = true;
            return; 
        }
        shuffle(data);
        var temp = data.slice(0, displayAmount);
        var display = '';
        for (index = 0; index < temp.length; ++index) {
            if(trash.indexOf(temp[index]) != -1)
            {
                display = display + "<span>" + temp[index] + "</span><br>";    
            }else{
                display = display + temp[index] + "<br>";
                trash.push(temp[index]);
            }
        }
        div.innerHTML = div.innerHTML + display + "<hr>";
        current++;
    }

    function resetAll()
    {
        trash = [];
        current = 0;
        div.innerHTML = '';
        document.getElementById("surprise").disabled = false;
        if(displayAmount == undefined) displayAmount = document.getElementById("retrieveNum").value;    
    }

    resetAll();

</script>
</body>
</html>

Works for this type of data in say, data.txt file, which you can upload...

M-3100
M-7333
M-0123
M-9087
M-2758
M-1267
M-3234
M-3198
M-3188
M-3170
M-3106

THIS IS NOT PRODUCTION CODE! This is a quick demo. Up to you to make it safe, to validate data and to perhaps send form to a different file and then redirect back. I feel like I've done all the work here :( That's not right. My fault. That's my last post here.

ultmt.punisher commented: Thank You for this :) +0

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ultmt.punisher 0 Junior Poster in Training · Answer 1 · 2014-07-22T11:40:50+00:00

well this numbers is not randomed , want to show radnomally,
I have these pre-defined numbers.
If I can put all these numbers in array using submit that would be more good.

ultmt.punisher 0 Junior Poster in Training · Answer 2 · 2014-07-22T13:38:33+00:00

why is this not working?
http://jsfiddle.net/hsn0/dXJLc/

ultmt.punisher 0 Junior Poster in Training · Answer 3 · 2014-07-22T13:50:31+00:00

but its showing values 1 by 1, I want to show 8 or 10 values at a time randomally from 100, suppose I have 100 numbers like this M-1131 and just show only 8 or 10 at a time on click, and when suffle again the numbered that shows earlier don't show or display in red colored. thanks

diafol · Answer 4 · 2014-07-22T14:28:05+00:00

OK, that's the bit I didn't understand from your original post.

diafol · Answer 5 · 2014-07-22T14:41:41+00:00

Try this...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#answers span{
    color: red; 
}
</style>
</head>
<body>
<button onClick="displayValue();" id="surprise">SURPRISE!</button>

<div id="answers"></div>
<script>
    var displayAmount = 3;
    var data = ["M-3100","M-7333","M-0123","M-9087","M-2758","M-1267","M-3234","M-3198","M-3188","M-3170","M-3106"];
    var div = document.getElementById('answers');
    var current = 0;
    var trash = [];


    //http://jsfromhell.com/array/shuffle
    function shuffle(o){ 
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };

    function displayValue()
    {
        shuffle(data);
        var temp = data.slice(0, displayAmount);
        var display = '';
        for (index = 0; index < temp.length; ++index) {
            if(trash.indexOf(temp[index]) != -1)
            {
                display = display + "<span>" + temp[index] + "</span><br>";    
            }else{
                display = display + temp[index] + "<br>";
                trash.push(temp[index]);
            }
        }
        div.innerHTML = div.innerHTML + display + "<hr>";
        current++;
    }
</script>
</body>
</html>

ultmt.punisher 0 Junior Poster in Training · Answer 6 · 2014-07-22T15:20:56+00:00

OK its somehow correct, but its showing again the previus number again that has been suffled, and it has no limit like in your first code was, its not end when all the numbers suffled. I want to stop suffling when all data is suffled, and that number should not suffled again that has been suffled before or showed before or should in different color.

thanks.

ultmt.punisher 0 Junior Poster in Training · Answer 7 · 2014-07-22T16:01:18+00:00

can you add more option to add this "M-3100","M-7333","M-0123","M-9087","M-2758","M-1267","M-3234","M-3198","M-3188","M-3170","M-3106" data into array [] from file using input upload file.

Taywin 312 Posting Virtuoso · Answer 8 · 2014-07-22T16:17:20+00:00

I would think that you would do the data shuffling or randomly select values from an array (in your case). Do both does not really increase the randomization but rather overkill...

diafol · Answer 9 · 2014-07-22T16:18:35+00:00

OK its somehow correct, but its showing again the previus number again that has been suffled, and it has no limit like in your first code was, its not end when all the numbers suffled. I want to stop suffling when all data is suffled, and that number should not suffled again that has been suffled before or showed before or should in different color.

I have no idea what you're talking about. If you want the process to stop once all numbers have been shown once, then that's easy. I assumed that you wanted numbers that had been drawn once to be able to be drawn again, but shown in red. That's what I did. The data array can be filled with an input file of course, but then you're into server-side code. Which technology are you using? PHP, .NET, Java, Node ?

ultmt.punisher 0 Junior Poster in Training · Answer 10 · 2014-07-22T16:23:37+00:00

yes my server side technology is PHP,
and I just want that the number which is already drawn will appear in differenct color or should not drawn again.
thanks

Taywin 312 Posting Virtuoso · Answer 11 · 2014-07-22T16:40:23+00:00

Here is an idea...

1)start with an array full of data you want.
---- function part ---
2)if the array is empty, return
3)shuffle the array.
4)random a number for display size (between 8-10)
5)if the current array size is less than the random number, assign the random number equal to the array size
6)iterate a loop up to the random number time.
7)inside the loop, pop/shift the array, display the number, augment the number in a span tag with color, and push it in another array (trash?).

If you want to save the original array, duplicate the array first because this way will destruct your array. Should that be good enough?

ultmt.punisher 0 Junior Poster in Training · Answer 12 · 2014-07-22T16:48:19+00:00

may be it works, but don't have any idea how to do all this in php. :(

ultmt.punisher 0 Junior Poster in Training · Answer 13 · 2014-07-22T21:12:49+00:00

well this is the perfect think :), am very thanx to you.

how to generate random numbers on click?

Recommended Answers Collapse Answers

All 18 Replies

Recommended Answers