Show the right answer when selected the right cell in the table

[jeets1892]

I wrote a code below. What I am trying to do here is, when the three right cells are selected, it should show a message saying "Right" , if not then should say "Try again". So far my code only highlights the cells. I am wondering how do I proceed next ?

  <table id="myTable" cellspacing="0" cellpadding="0">
        <tr>
            <td class="bgrd" onclick="setColor(this)">
            A1</td>
            <td class="bgrd" onclick="setColor(this)">
           B1</td>
            <td class="bgrd" onclick="setColor(this)">
            C1</td>

        </tr>
        <tr>
            <td class="bgrd" onclick="setColor(this)">
            A2</td>
            <td class="bgrd" onclick="setColor(this)">
            B2</td>
            <td class="bgrd" onclick="setColor(this)">
            C2</td>

        </tr>


        <tr>
            <td class="bgrd" onclick="setColor(this)">
            A3</td>
            <td class="bgrd" onclick="setColor(this)">
            B3</td>
            <td class="bgrd" onclick="setColor(this)">
            C3</td>

        </tr>

        <tr>
            <td class="bgrd" onclick="setColor(this)">
            A4</td>
            <td class="bgrd" onclick="setColor(this)">
            B4</td>
            <td class="bgrd" onclick="setColor(this)">
            C4</td>

        </tr>

        <tr>
            <td class="bgrd" onclick="setColor(this)">
            A5</td>
            <td class="bgrd" onclick="setColor(this)">
            B5</td>
            <td class="bgrd" onclick="setColor(this)">
            C5</td>

        </tr>

        <tr>
            <td class="bgrd" onclick="setColor(this)">
            A6</td>
            <td class="bgrd" onclick="setColor(this)">
            B6</td>
            <td class="bgrd" onclick="setColor(this)">
            C6</td>

        </tr>


    </table>

    <script type="text/javascript">
        var answerRow = 5;
        var noOfCols = 3;

        function setColor(what)
        {
            if(what.className == 'bgrd_selected')
            what.className = 'bgrd';
            else
            what.className = 'bgrd_selected';
            if(what.parentNode.getElementsByClassName('bgrd_selected').length == noOfCols)
            {
                if(document.getElementById('myTable').getElementsByTagName('tr')[answerRow].getElementsByClassName('bgrd_selected').length == noOfCols)
                    alert('You win');
                else
                {
                    alert('Try again');
                var arr = document.getElementById('myTable').getElementsByTagName('td') ;
                    for(var i=0;i<arr.length;i++)
                    {
                        arr[i].className="bgrd";
                    }
                }
            }
        }

</script>
<style type="text/css">
    table {
    width:400px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    border:1px solid #000;
    }
    table td {border:1px solid #000;}
    .bgrd {background-color:#CCCCCC;cursor:pointer;}
    .bgrd_selected {background-color:#FFCC00;cursor:pointer;}

</style>

P.S Here if A1, B2 and C3 are selected it should say "Right" . if something else then it should say try again.

Thanks

@jeets1892

I wrote a code below. What I am trying to do here is, when the three right cells are selected, it should show a message saying "Right" , if not then should say "Try again". So far my code only highlights the cells. I am wondering how do I proceed next ?

I assume you already answer your question:

http://stackoverflow.com/questions/13578043/show-the-right-answer-when-selected-the-right-cell-in-the-table