Log in

View Full Version : 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" >
<!--

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

function fillCell(cellnum){
//the function fills the cell selected by the human player
}

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){

document.writeln("<center>THREE FILLED CELLS</center><br />");
document.writeln("<table align = center cellpadding= \"0\" cellspacing=\"0\" border=\"3\" style='border-color:\"black\" ' ><tr>");
for (var i=0; i < n ; i++){
document.writeln("<td width= \"50\"> <a href= \"javascript:fillCell("+i+");\" > <img src= \"color.gif\" border= \"3\" style='border-color:\"black\"' name= \"fc"+i+"\" /> </a></td>");
}
document.writeln("</tr></table>");
}

//-->
</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.




<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! :D