I have been trying to program a puzzle webpage in JavaScript. Basically, each puzzle is a table with a different image in each cell. When the user clicks on an image, one or more of the images may change. Here is the code that I have in the body of the webpage

<script type="text/javascript">
document.writeln ("<table border=2 bgcolor=white cellpadding=2 cellspacing=0><tr><td>");
document.writeln ("<table border=0 bgcolor=white cols=8 cellpadding=0 cellspacing=0>");
for (var i=1; i<=nrows; i++)
{document.writeln ("<tr align=center>");
for (var j=1; j<=ncols; j++)
{document.writeln ("<td><img src="+PickImg(i,j)+IfClick(i,j)+"></td>"); }
document.writeln ("</tr>");
}
document.writeln ("</table></td></tr></table>");
}
</script>

The function PickImg chooses the image that will be displayed in each cell. The function IfClick decides if the image should be clickable by the user. Nrows and Ncols give the numbers of rows and columns. I have verified that these are operating correctly

I've got this working in the code. That is, the source for each image is set correctly in the generated HTML code. But nothing happens on the screen. No matter how many times I change the contents of the cells, the image on the screen stays the same. I want the table to be redrawn when the contents of any cell(s) change. (All images are the same size.)

Is there any way to tell the browser that the table should be redrawn? Is there any place where I could find the answer?