JavaScript function called from an <A> tag

**NewOnThis** · 10-31-2005, 06:52 PM

I'm trying to make a game.I create an odd random number of cells and if a click on one cells it must change color. My problem is that the function fillCell called in the tag <a> is not seen by the browser. It doesn't do anything and I can't see why.
Tks

Here is the code:

<html>
<head>
<script language="javascript" >

</script>
</head>
<body onload="initialize()">
</body>
</html>

**ddadmin** · 10-31-2005, 07:40 PM

One obvious problem is that you're calling document.write() after the page has loaded (via onload), which is illegal. Document.write() needs to be called immediately on the page as it is loading, and cannot be attached to any event handler. You can however use the .innerHTML property to populate an element with HTML after the page has loaded.

**knastera** · 11-03-2005, 01:41 AM

Building on what the previous person said, here is an example using the innerHTML property of a DIV to make your program work. Remember, this is not going to be completely cross browser compatible because not all browsers recognize innerHTML or getElementById.

Code:

<html>
<head>
<script language="javascript" >
                 <!--

                 var noCells=0;
var arrCells=new Array();

function fillCell(cellnum) {
  //the function fills the cell selected by the human player
  var txtDivLocation = "fc" + cellnum;

  for(var i = 0; i < noCells; i++) {
      if(i == cellnum) {
          document.getElementById(txtDivLocation).style.background = "red";
        } else {
          var txtOtherDivLocation = "fc" + i;
          document.getElementById(txtOtherDivLocation).style.background = "white";
        }
    }
}

function initialize() {

  //creates an odd number btw 0 and 10
  noCells=Math.floor(Math.random()* 10);

  if ((noCells % 2)== 0)
    noCells++;

  //initializes the array of cells with 0 -empty cells
  for (var i=0; i< noCells; i++)
    arrCells[i]=0;

  outputCells(noCells);
}

function outputCells(n) {

  var txtNewText = "<html><head></head><body><p><center>THREE FILLED CELLS</center></p>";
  txtNewText += "<table align = center cellpadding= \"0\" cellspacing=\"0\" border=\"3\" style='border-color:\"black\" ' ><tr>";

  for (var i=0; i < n ; i++) {
      txtNewText += "<td width= \"50\"><a href= \"javascript:fillCell("+i+");\" > <div style='border-color:\"black\";' id= \"fc"+i+"\" />***" + (i+1) + "***</a></td>";
    }

  txtNewText += "</tr></table></body></html>";
  document.getElementById("dOne").innerHTML = txtNewText;
}

//-->
</script>
</head>
<body onload="initialize();">
       <div id="dOne"></div>
</body>
</html>

Happy coding,
Andy

**NewOnThis** · 11-10-2005, 02:17 PM

Tks for your solution! It helps a lot!

Thread: JavaScript function called from an <A> tag

Thread Tools

Search Thread

JavaScript function called from an <A> tag

One solution

Bookmarks

Bookmarks

Posting Permissions