onClick from Table Cell Help

[news.east.cox.net]

Hello,
I'm trying to figure out why the following code won't work for me. The
Firefox javascript console tells me that tableItemClicked is not
defined, but the function is right there in the code. Any help would be
greatly appreciated.

<script type="text/javascript">

function Initialize() //is called upon page load
{
MakeTable();
}//end Initialize

function MakeTable(){
var iNumCells=10;
var text="";
var counter = 1;

document.write("<table><table border = 1><tr>");// "table width='50%'
name='mytable'")
for (counter = 1; counter <= iNumCells; counter++){
text = "";
//funcText="TableItemClicked('" + counter + "');";

//create a new row every 5 items
if(counter % 5 == 0 && counter!=0){
text = text + "<td id=" + counter + " "+ "
onClick=\"tableItemClicked();\">" + "Item: " + counter + "</td></tr>";
alert(text);
document.write(text);
}

else if (counter - 1 % 5 == 0){
text = "<tr><td>Item: " + counter + "</td>";
document.write(text);
}

else{
text = "<td>Item: " + counter + "</td>";
document.write(text);
}
}
document.write("</table>");

document.write("<p><div id = 'targetDiv'>Item number will appear
here</div></p>");
}// end MakeTable

function tableItemClicked()
{
alert("tableItemClicked");
//document.getElementById('targetDiv').innerHTML = "You clicked item
number " + counter;
}//end TableItemClick

</script>

[Ian Collins]

news.east.cox.net wrote:

Hello,
I'm trying to figure out why the following code won't work for me.
The Firefox javascript console tells me that tableItemClicked is not
defined, but the function is right there in the code. Any help would be
greatly appreciated.

Use DOM methods to build your table, it's much easier to read.

--
Ian Collins.

[news.east.cox.net]

I will try the DOM method, but I don't know if that will solve my
problem. I think there is something I'm not understanding about calling
a function from another function. I'm pretty sure that my
misunderstanding would follow me to DOM.

The actual code to create the tag I'm having trouble with is:
text = text + "<td id=" + counter + " "+ "
onClick=\"tableItemClicked();\">" + "Item: " + counter + "</td></tr>";

The tag itself reads:
<td id=5 onClick="tableItemClicked();">Item 5</td>

JavaScript Console in Firefox reports that:
tableItemClicked is not defined

Ian Collins wrote:

news.east.cox.net wrote:

Hello,
I'm trying to figure out why the following code won't work for me.
The Firefox javascript console tells me that tableItemClicked is not
defined, but the function is right there in the code. Any help would be
greatly appreciated.

Use DOM methods to build your table, it's much easier to read.

[Stephen Chalmers]

news.east.cox.net wrote:

function Initialize() //is called upon page load
{
MakeTable();
}//end Initialize

If that comment is accurate, it means that you're writing to a closed
document, which will have rather shaky results. How exactly are you
calling Initialize()?

I notice that your code appears to open two tables but closes only one.

The '/' character in closing tags ideally should be escaped: <\/td>
--
S.C.

[RobG]

Stephen Chalmers said on 21/04/2006 11:15 AM AEST:

news.east.cox.net wrote:

function Initialize() //is called upon page load
{
MakeTable();
}//end Initialize

If that comment is accurate, it means that you're writing to a closed
document, which will have rather shaky results.

Not really shaky, a call to document.write() after the document has
loaded will call document.open(), which will remove the entire content
of the page.

The OP's code results in the following HTML:

<TABLE>
<TBODY></TBODY>
</TABLE>
<TABLE border=1>
<TBODY>
<TR>
<TR>
<TD>Item: 1</TD>
<TD>Item: 2</TD>
<TD>Item: 3</TD>
<TD>Item: 4</TD>
<TD id=5 onclick=tableItemClicked();>Item: 5</TD>
</TR>
<TR>
<TD>Item: 6</TD>
<TD>Item: 7</TD>
<TD>Item: 8</TD>
<TD>Item: 9</TD>
<TD id="10" onclick="tableItemClicked();">Item: 10</TD>
</TR>
</TBODY>
</TABLE>
<P>
<DIV id="targetDiv">Item number will appear here</DIV>
<P></P>
The reason calling 'tableItemClicked()' returns undefined is because the
function is not defined anywhere - it was deleted by document.open()
when document.write() was called.

If the Initialize() function is called during page load, the onclick
'works'.

[...]
--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>

[Ian Collins]

Stephen Chalmers wrote:

news.east.cox.net wrote:

function Initialize() //is called upon page load
{
MakeTable();
}//end Initialize

If that comment is accurate, it means that you're writing to a closed
document, which will have rather shaky results. How exactly are you
calling Initialize()?

I notice that your code appears to open two tables but closes only one.

Another good reason to use DOM!

--
Ian Collins.

[Reginald Johnson]

This is how I am calling Initialize()

<body onload="Initialize()" >
</body>

So, I am calling it during page load

RobG wrote:

Stephen Chalmers said on 21/04/2006 11:15 AM AEST:

news.east.cox.net wrote:

function Initialize() //is called upon page load
{
MakeTable();
}//end Initialize

If that comment is accurate, it means that you're writing to a closed
document, which will have rather shaky results.

Not really shaky, a call to document.write() after the document has
loaded will call document.open(), which will remove the entire content
of the page.

The OP's code results in the following HTML:

<TABLE>
<TBODY></TBODY>
</TABLE>
<TABLE border=1>
<TBODY>
<TR>
<TR>
<TD>Item: 1</TD>
<TD>Item: 2</TD>
<TD>Item: 3</TD>
<TD>Item: 4</TD>
<TD id=5 onclick=tableItemClicked();>Item: 5</TD>
</TR>
<TR>
<TD>Item: 6</TD>
<TD>Item: 7</TD>
<TD>Item: 8</TD>
<TD>Item: 9</TD>
<TD id="10" onclick="tableItemClicked();">Item: 10</TD>
</TR>
</TBODY>
</TABLE>
<P>
<DIV id="targetDiv">Item number will appear here</DIV>
<P></P>
The reason calling 'tableItemClicked()' returns undefined is because the
function is not defined anywhere - it was deleted by document.open()
when document.write() was called.

If the Initialize() function is called during page load, the onclick
'works'.

[...]

[Reginald Johnson]

Ian Collins wrote:

Stephen Chalmers wrote:

news.east.cox.net wrote:

function Initialize() //is called upon page load
{
MakeTable();
}//end Initialize

If that comment is accurate, it means that you're writing to a closed
document, which will have rather shaky results. How exactly are you
calling Initialize()?

I notice that your code appears to open two tables but closes only one.

Another good reason to use DOM!

DOM solved the problem. I'm still not sure what I did wrong in the
first instance, but using DOM solved it. Thanks for the help.