Jquery for loop assigning a random value?

Question

I'm a student and very new to coding, I'll try my best to explain the issue i'm having. So I have an array which I want to show up as buttons on my page using jquery. Each button needs to be assigned a random value between 1 and 12. I have a for loop going through the buttons assigning a random value. I got that to work. My problem however, is that I don't want any of the buttons to contain the same value. So if the first button generates a random value of "2" I don't want any of the last 3 buttons to contain a value of "2". Here is my code so far. Any help would be greatly appreciated.

$(document).ready(function () {
    // Create random number between 19 and 120
    var number = Math.floor(Math.random() * (120 - 19 + 1) + 19);
    console.log(number);
    //show random number to user

    var randomNumberField = $("#randomNumber");
    randomNumberField.text(number);

    //Create crystals/buttons
    var Crystals = [1, 2, 3, 4];


    for (var i = 0; i < Crystals.length; i++) {
        var crystalNumber = Math.floor(Math.random() * (12 - 1 + 1) + 1);
        console.log(crystalNumber);

        if ($("crystalNumber") === $("Crystals")) {
            crystalNumber = Math.floor(Math.random() * (12 - 1 + 1) + 1);
        };

        else(var i = 0; i < Crystals.length; i++)

        var crystalImage = $("<img>");


    }



}); // end of script

What do you mean by this line if ($("crystalNumber") === $("Crystals")) ? — amku91, Sep 05 '18 at 10:31
Try look at: https://stackoverflow.com/questions/20039025/java-array-of-unique-randomly-generated-integers — Martin, Sep 05 '18 at 10:33
You say that attributing random numbers is working... Can you share the HTML? — Louys Patrice Bessette, Sep 05 '18 at 10:41
@Martin: The answer you suggest is Java... Java is to JavaScript what a car is to a carpet. ;) — Louys Patrice Bessette, Sep 05 '18 at 10:59
@LouysPatriceBessette My b, this: https://stackoverflow.com/questions/2380019/generate-unique-random-numbers-between-1-and-100 — Martin, Sep 05 '18 at 11:05
You choose a random item from the array and remove it from the array. Repeat. — Salman A, Sep 05 '18 at 11:15
@LouysPatriceBessette I used console.log to show the random values it was generating, and that's how I discovered sometimes some of the numbers would have the same value. — Ryguy, Sep 05 '18 at 11:46

Louys Patrice Bessette · Answer 1 · 2018-09-05T11:15:46.203

0

I don't know about your crystals... I assumed 4 buttons for this example.

To make sure a random number isn't used more than once, first you have to use an array to store the used ones.

Then each time you try to obtain a new one, run a while loop until the number produced is not in the already used ones array.

The test to know if in the array or not is done using .$.inArray()

$(document).ready(function(){

  var buttons = $(".randNumber");
  var randNumbers = [];

  buttons.each(function(index){
    number = Math.floor((Math.random() * 12) + 1);
    
    while( $.inArray(number,randNumbers) != -1 ){
      number = Math.floor((Math.random() * 12) + 1);
    }
    
    randNumbers.push(number);
    buttons.eq(index).html(number);
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="randNumber"></button>
<button class="randNumber"></button>
<button class="randNumber"></button>
<button class="randNumber"></button>

edited Sep 05 '18 at 11:15

answered Sep 05 '18 at 10:56

Louys Patrice Bessette

33,375
6
36
64

Worth noting that you are able to get duplicate values of your buttons in the current example: https://gyazo.com/e83d0d76cb3d2f389c38a38648da2bae – Martin Sep 05 '18 at 11:03
Thanks @Martin. I fixed it... It strangely took me a lot time to remember that `$.inArray()` is not returning a boolean, but an array index... Which is `-1` when not found. ;) – Louys Patrice Bessette Sep 05 '18 at 11:18
@LouysPatriceBessette I'm sorry, I'm also new to stackoverflow you said you fixed it? Does that mean the code above has been edited? or will it still sometimes generate the same values? I think this will help and I think I understand what your code is doing. Thank you for your time. – Ryguy Sep 05 '18 at 11:49
Yes, It has been edited. the condition of the `while` loop was wrong. It's now ok. – Louys Patrice Bessette Sep 05 '18 at 11:51
if the answer was good for you, consider [accepting it](https://stackoverflow.com/help/someone-answers) ;) – Louys Patrice Bessette Sep 05 '18 at 14:33

Jquery for loop assigning a random value?

1 Answers1