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