Hello. I have a feeling this will end up in a much bigger mess than I can possibly imagine, but we have nothing to lose but our ignorance, so what the .
I will explain what I need on a drastically simplified example.
Suppose I have a basic table 2x2 that I draw using JavaScript. Furthermore, I use a function because the table will be a bit dynamic, with input parameters. One of the cells contains "X", others are empty.
xmax and ymax are the number of rows and columns
x0 and y0 are "coordinates" of the cell that contains an X.
So, the code for this is:
<script>
function tablica(xmax, ymax, x0, y0)
{
document.write("<table border='1px'>");
for (var i=1; i<=xmax; i++)
{
document.write("<tr>");
for (var j=1; j<=ymax; j++)
if ((j==x0) && (i==y0)) document.write("<td onclick='myFunction(i,j)'>X</td>")
else document.write("<td onclick='myFunction(i,j)'> </td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
I want the following to happen: when I click on a cell, I want the WHOLE table to reload itself, but with the "X" in the cell that I clicked on.
So, can what I want be done at all with innerHTML, if yes, what is the trick, and if no, what would you guys recommend?
I took a look at the innerHTML thing. It says:
<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>
The problem is, with this setup, I can't get the initial table to load itself at all so that I have something to click on. But if I do put a call to function tablica() with some initial values, then it overrides everything and reloads with those initial values, regardless of what the new input is.
Thank you.
(I probably also switched i-j and/or x-y, but I'll worry about it when I get the thing working)