Javascript css class based on random number

Question

I have a 4x3 matrix where the class is set to blank (white background). I'm using var rand = Math.floor(Math.random()*2 + 1);
and if its 1, the class is set to one (red background) and if its 2, the class is set to two (blue background). My code is suppose to make 6 links red and 6 links blue with the newgame function, however, sometimes a few of them are still white or there are not exactly 6 red or blue. You might need to refresh (not click new game button) to see what I mean

here it is live: https://dl.dropbox.com/u/750932/iPhone/risk.html

<!DOCTYPE html>
<html>
<head>
<title>RISK</title>
<style type="text/css" media="screen">
    a:link, a:visited {color: #eee;border:3px solid #ccc;display:inline-block;margin:3px;text-decoration:none;padding:26px;}
    .blank {background:#fff;}
    .one {background: #7B3B3B;}
    .two {background: #547980;}
    #status {color: #eee;padding:1px;text-align:center}
    .current {border:3px solid #000;}
    p {margin:0 0 15px;padding:0;}
</style>
<script type="text/javascript" charset="utf-8">
var oneTurn = true;
var gameOver = false;
var numMoves = 0;

function newgame()
{
    var status = document.getElementById('status');
    var one = 0;
    var two = 0;
    numMoves = 0;
    gameOver = false;
    oneTurn = true;
    status.innerHTML = 'Player One\'s turn';

    for(var x = 0; x < 4; x++)
    {
        for(var y = 0; y < 3; y++)
        {
            var rand = Math.floor(Math.random()*2 + 1);
            if(rand == 1 && one < 7)
            {
                document.getElementById('a' + x + '_' + y).setAttribute("class", "one");
                one++;
                console.log("one");
            }
            else if(rand == 2 && two < 7)
            {
                document.getElementById('a' + x + '_' + y).setAttribute("class", "two");
                two++;
                console.log("two");
            }
            document.getElementById('a' + x + '_' + y).innerHTML = Math.floor(Math.random()*5 + 1);
        }
    }
    console.log(one);
    console.log(two);
}
function current(selected)
{
    var status = document.getElementById('status');
    var value = selected.value; 
}
</script>
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>

<body onload='newgame();'>
<p id="status" class="one">Player One's turn</p>
<br />
<a href="#" id="a0_0" class="blank" onclick="current(this);"></a>
<a href="#" id="a1_0" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_0" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_0" class="blank" onclick="current(this);"></a>
<br />

<a href="#" id="a0_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a1_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_1" class="blank" onclick="current(this);"></a>
<br />

<a href="#" id="a0_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a1_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_2" class="blank" onclick="current(this);"></a>
<br /><br />

<p><input type="button" id="newgame" value="New Game" onclick="newgame();" /></p>
</body>
</html>

Darin Dimitrov · Accepted Answer · 2010-01-01 09:13:07Z

Let me offer you a slightly different approach. Represent the board as an array of 12 integers.

Fill the first half of this array with one's and the second half with two's.
Shuffle the array

Loop through the array and update the DOM elements by converting the array index to the corresponding row and column in the matrix

// initialize the array
var board = [1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2];

// shuffle the array
for(var j, x, i = board.length; i; j = parseInt(Math.random() * i), 
    x = board[--i], board[i] = board[j], board[j] = x);

// At this stage one's and two's will be randomly distributed
var row = -1;
for (var i = 0; i < board.length; i++) {
    var class = board[i] == 1 ? 'one' : 'two';
    var col = i % 4;
    if (col == 0) row++;
    var box = document.getElementById('a' + col + '_' + row);
    if (box != null) {
        box.setAttribute('class', class);
        box.innerHTML = 1 + Math.floor(Math.random() * 5);
    }
}

Tobias Cohen · Accepted Answer · 2010-01-01 08:56:57Z

0

Read your code again:

if(rand == 1 && one < 7)
...
else if(rand == 2 && two < 7)

Once you roll a red more than six times, or a blue more than six times, your code just does nothing for that square, this is why you end up with white squares.

Try something like this:

if((rand == 1 && one <= 6) || two > 6)
...
else

answered Jan 1, 2010 at 8:56

Tobias Cohen

20k8 gold badges56 silver badges52 bronze badges

1 Comment

Raptrex Over a year ago

alright this solved the white square problems. However, sometimes I don't get exactly 6 red and 6 blue.

Collectives™ on Stack Overflow

Javascript css class based on random number

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related