'Shuffling array JavaScript

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf=8" />
        <title>Blackjack</title>
        <link rel="stylesheet" href="blackjack.css" />
        
        <script type="text/javascript">
        
            var H2 = 2; var S2 = 2; var D2 = 2; var C2 = 2;
            var H3 = 3; var S3 = 3; var D3 = 3; var C3 = 3; 
                
    
            
            var deck = new Array(H2, S2, D2, C2, H3, S3, D3, C3);
            
            var new_deck = new Array();
            
            var r;
            
            document.write("deck = ")
            
            for (r =0; r<deck.length; r++){
                document.write(deck[r]);
                }
                
            document.write("</br>")
                
            document.write("new deck = ")
            
            for (r=0; r<new_deck.length; r++){
                document.write(new_deck[r]);
                }
                
            document.write("</br>")
            
            for (r=0;r<deck.length;r++){
                var randomindex = Math.floor(Math.random()*deck.length);
                new_deck.push(randomindex)
                deck.pop(randomindex)
                }
                
            document.write("deck = ")
            
            for (r =0; r<deck.length; r++){
                document.write(deck[r]);
                }
                
            document.write("</br>")
                
            document.write("new deck = ")
            
            for (r=0; r<new_deck.length; r++){
                document.write(new_deck[r]);
                }
                
            document.write("</br>")
                
            
        </script>
        
    </head>
    <body>
    </body>
</html>

Obviously this isn't the full Blackjack game here. It's just a test to see if shuffling the array works by printing the contents of both decks (arrays) before and after the shuffle.

I'm only using 8 cards at the moment, 4 2's and 4 3's.

What I am getting from this is:

deck = 22223333
new deck =
deck = 2222
new deck = 7502

What I'm hoping to get is:

deck = 22223333
new deck =
deck =
new deck = 23232323 (or any of the 8 numbers, generated randomly)

So it should be shuffling those 8 cards, what am I doing wrong? I'm only new to JavaScript but I've used some python before. I've done something similar in python and worked perfectly, but I'm not sure what's wrong here.

javascripthtmldom-events


Solution 1:[1]

Another super easy array sort technique:

 deck.sort(function() { return Math.random()-0.5})

Solution 2:[2]

You'll want to change your shuffle for this:

while(deck.length > 0 ){ //for loop won't work
    var randomindex = Math.floor(Math.random()*deck.length);
    new_deck.push(deck[randomindex]);//Move onto new stack
    deck.splice(randomindex,1); //Take from old.
}

Here's why the for loop won't work: Say deck.length = 4

Start of the for loop: r = 0

One item is pushed onto new stack & popped: deck.length = 3

r is incremented r = 1

r is less than deck.length, continue

One item is pushed onto new stack & popped: deck.length = 2

r is incremented r = 2

r is no longer less than deck.length, the loop has finished but only half the elements where transferred!

Solution 3:[3]

you are getting a random value, not a random index into the deck

for (r=0;r<deck.length;r++){
    var randomindex = Math.floor(Math.random()*deck.length);
    new_deck.push(deck[randomindex]);
}

Solution 4:[4]

The first problem begins in the for loop where you randomize the deck. You need to create a new variable before the loop containing the deck's length. See:

for (r=0;r<deck.length;r++){
    var randomindex = Math.floor(Math.random()*deck.length);
    new_deck.push(randomindex)
    deck.pop(randomindex)
}

What you have going on here is that r increases by 1 at the same time as deck.length is decreasing by 1 (due to the pop in the for loop). So, that's why you're only getting four "cards" in your shuffled deck. The second problem is that you're not pushing a card into the new deck, you're pushing the randomindex itself.

This code should do the trick:

var i = deck.length;
for (r=0;r<i;r++){
    var randomindex = Math.floor(Math.random()*deck.length);
    new_deck.push(deck.splice(randomindex, 1));
}

(P.S.: Originally, neither of your statements in the above for loop had semicolons at the end.)

Edit: You could also use a while() loop. See meiamsome's answer.

Edit 2: As Joe mentioned below, pop() doesn't take an argument. splice() does what you're trying to accomplish.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Joe Frambach
Solution 2
Solution 3 Patrick Evans
Solution 4 Community

Related Questions