trouble setting the onclick attribute

cjwahlen · May 18th, 2007, 01:05 PM

Hello everyone. Im trying to finish up a project for my Web Development class. Im building a game which previously worked, but now im adding additional functionality. I cant seem to set the onclick event for the cells in a table. The three commented out lines in the DOM file were lines that I couldn't get to work.

Here is the html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Playing A Child's Game</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT language=JavaScript src="DOMgame.js"> </SCRIPT>
<style type="text/css">
td, table {BORDER-RIGHT: blue thick solid;
    BORDER-TOP: blue thick solid;
    BORDER-LEFT: blue thick solid;
    BORDER-BOTTOM: blue thick solid}
</style>

<META content="MSHTML 6.00.2900.2769" name=GENERATOR></HEAD>
<BODY bgColor=#fdf5e6>
    <H1 align=center>Playing A Child's Game</H1>
    <form>
        <p>
        <input type="text" name="rows" size="50" maxlength="4" /></br>
        <input type="text" name="columns" size="50" maxlength="4" /></br>
        <input type="button" onclick= "createTable(form)" value="Create Table">
        </p>
    </form>
    <TABLE>
      <TBODY>
      <TR>
        <TD>Number of Columns</TD>
        <TD id=numcolumns></TD></TR>
      <TR>
        <TD>Number of Rows</TD>
    <TD id=numrows></TD></TR></TBODY></TABLE>
    <TABLE ID="oTable">
    <TBODY ID="oTBody"></TBODY>
    </TABLE>

</BODY>
</HTML>

Here is the DOM file:

// Variables (Global)
var oCurCell = null; //currently selected row object, if any
var numberRows = 0;
var numberCols = 0;
var cellNum = 0;
var locCellA = 0;
var locCellB = 0;
var locCellC = 0;
var locCellD = 0;

function createTable(formIn){
    var oRow, oCell;
    var curr_row, curr_cell;

    numberRows = formIn.rows.value;
    numberCols = formIn.columns.value;
    var currentElement = (numberCols * numberRows)

    for (curr_row = 0 ; curr_row < numberRows ; curr_row++){
        oRow = oTBody.insertRow(curr_row)
        for (curr_cell = 0 ; curr_cell < numberCols ; curr_cell++){
            currentElement = currentElement - 1;
            if (currentElement != 0){
                oCell = oRow.insertCell(curr_cell);
                oCell.appendChild(document.createTextNode(currentE lement));
                oCell.setAttribute('id', currentElement)
                //oCell.onclick = function(){select(oCell);};
                //oCell.onclick = select(oCell)
                //oCell.setAttribute("onclick","select(oCell)")
            }

        }
    }

}

function select(oCell){
        if (numberRows == 0) {
            var NC = document.getElementById("numcolumns");
            var NR = document.getElementById("numrows");
            numberCols = NC.firstChild.data;
            numberRows = NR.firstChild.data;
           }
        var lenToGet = oCell.id.length - 1
        cellNum = oCell.id.substr(1,lenToGet);
        cellNum = cellNum * 1;

    locCellA = cellNum - numberCols;
    locCellB = cellNum + 1;
    locCellC = cellNum - (numberCols * -1);
    locCellD = cellNum - 1;
// Does cell exist?
// Is it empty?
// If both true move values & exit
        if (locCellA > 0)
           {
                if (movemade(locCellA, oCell) == true)
                    {
                    return
                    }
            };
         if (locCellB % numberCols != 1)
        {
             if (movemade(locCellB, oCell) == true)
                  {
                   return
                   }
             };
       if (locCellC <= (numberRows * numberCols))
           {
                if (movemade(locCellC, oCell) == true)
                    {
                    return
                    }
            };
       if (locCellD % numberCols != 0)
           {
                if (movemade(locCellD, oCell) == true)
                    {
                    return
                    }
            };
function movemade(oCheckCell, oCell){
    var checkId = "C" + oCheckCell;
      var x = document.getElementById(checkId);
    if (x.firstChild == null)
       {
      x.appendChild(oCell.firstChild);
        checkForWin()
        return true;
        }
    else
        {
        return false;
        }
  }
   function checkForWin(){
        var win = 'YES';
        for (i=1; i < (numberRows * numberCols); i++)
            {
                var checkId = "C" + i;
             var x = document.getElementById(checkId);
            if (x.firstChild == null)
                 { win = 'NO' }
            else
                      {
                         if (x.firstChild.data != i)
                            { win = 'NO';
                             x.bgColor = "white" }
                else
                            { x.bgColor = "yellow"}
                       }
                }
          if (win == 'YES')
               { alert ( "YOU WON") }
     }
}