Lights Out 1.0

HTML

<input type="submit" id="newGame" value="New Game" onclick="newLightsOut()" class="lightsOut buttons" />
<input type="submit" id="newRandomeGame" value="New Random Game" onclick="newRandomLightsOut()" class="lightsOut buttons" />
<label for="inputGridSize" class="lightsOut">&nbsp;Grid Size:</label>
<input type="text" id="inputGridSize" size="2" value="3" class="lightsOut" />
<br />
<br />
<p id="buttonGrid">
    <input type="button" id="button_0_0" value="  " onclick="doLightsOut(0, 0)" class="button shown" style="margin: 2px 0px 2px 2px" />
    <input type="button" id="button_0_1" value="  " onclick="doLightsOut(0, 1)" class="button shown" style="margin: 2px 0px 2px 0px" />
    <input type="button" id="button_0_2" value="  " onclick="doLightsOut(0, 2)" class="button shown" style="margin: 2px 0px 2px 0px" />
    <br />
    <input type="button" id="button_1_0" value="  " onclick="doLightsOut(1, 0)" class="button shown" style="margin: 2px 0px 2px 2px" />
    <input type="button" id="button_1_1" value="  " onclick="doLightsOut(1, 1)" class="button shown" style="margin: 2px 0px 2px 0px" />
    <input type="button" id="button_1_2" value="  " onclick="doLightsOut(1, 2)" class="button shown" style="margin: 2px 0px 2px 0px" />
    <br />
    <input type="button" id="button_2_0" value="  " onclick="doLightsOut(2, 0)" class="button shown" style="margin: 2px 0px 2px 2px" />
    <input type="button" id="button_2_1" value="  " onclick="doLightsOut(2, 1)" class="button shown" style="margin: 2px 0px 2px 0px" />
    <input type="button" id="button_2_2" value="  " onclick="doLightsOut(2, 2)" class="button shown" style="margin: 2px 0px 2px 0px" />
</p>
<p id="victoryMsg" class="lightsOut victory" />

CSS

.lightsOut
{
    font-family: Monospace;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    color: #000066;
    background-color: #FFFFFF;
}

.lightsOut.buttons
{
    cursor: pointer;
}

.lightsOut.victory
{
    border: none;
    font-size: 50px;
    color: #FFFFFF;
    background-color: #000066;
}

.button
{
    height: 30px;
    width: 30px;
    margin: 2px 2px 2px 2px;
    
    border: solid 1px;
    outline: none;
    cursor: pointer;
    background: transparent;
}

.button.shown
{
    border-color: #000066;
    background-color: #FFF5AE;
}

.button.hidden
{
    border-color: #000066;
    background-color: #000066;
}

JavaScript

function getGridSize()
{
    var gridSize = document.getElementById('inputGridSize').value;
    
    // Grid sizes between 2 and 15 allowed; default is 3.
    if (gridSize === null || gridSize <= 0)
        gridSize = 3;
    if (gridSize < 2)
        gridSize = 2;
    if (gridSize > 15)
        gridSize = 15;
    
    return gridSize;
}

function newLightsOut()
{
    // Generate grid buttons.
    generateGrid();
    
    // Reset victory message.
    document.getElementById('victoryMsg').innerHTML = '';
}

function newRandomLightsOut()
{
    newLightsOut();
    
    // Randomize starting button grid.
    var gridSize = getGridSize();
    
    for (var i = 0; i < gridSize; i++)
        for (var j = 0; j < gridSize; j++)
            if (Math.random() >= 0.5)
                toggleButton(i, j);
}

function doLightsOut(row, col)
{
    var gridSize = getGridSize();
    
    // Toggle pressed button:
    toggleButton(row, col);    
    
    // Toggle buttons above, below, left, right:
    if ((row - 1) >= 0)
        toggleButton(row - 1, col);
    if ((row + 1) < gridSize)
        toggleButton(row + 1, col);
    if ((col - 1) >= 0)
        toggleButton(row, col - 1);
    if ((col + 1) < gridSize)
        toggleButton(row, col + 1);
    
    // Check for win condition.
    isVictory();
}

function toggleButton(row, col)
{
    var targetButton = getButtonID(row, col);
    
    if (document.getElementById(targetButton).getAttribute('class') == 'button shown')
        document.getElementById(targetButton).setAttribute('class', 'button hidden');
    else
        document.getElementById(targetButton).setAttribute('class', 'button shown');
}

function getButtonID(row, col)
{
    return 'button_' + row.toString() + '_' + col.toString();
}

function generateGrid()
{
    document.getElementById('buttonGrid').innerHTML = '';
    
    var gridSize = getGridSize();
    var result = '';
    
    for (var i = 0; i < gridSize; i++)
    {
        for (var j = 0; j < gridSize; j++)
    ...