Self-referencing (recursive) inner.HTML in a JS script?

[Corbeau]

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)

[justsomeguy]

First, don't use document.write. Use normal modern ways to create elements, attach click handlers, and add them to the page. Using document.write will destroy the rest of your page. That means using things like document.createElement, Node.appendChild, etc. Table elements in particular have their own set of methods for changing the rows and cells, so you can use those also (which would probably be preferred). As long as you remove the existing table (or only its contents) before adding the elements again then you can run that as many times as you want. You can still use innerHTML to set the contents of the cells to add the X or whatever, but you should use the more modern ways to create elements and put click handlers on them.

 

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

[Corbeau]

Gh, exactly like i said.... Bigger mess than I could possibly imagine.

 

Thanks.

[thescientist]

Gh, exactly like i said.... Bigger mess than I could possibly imagine.

 

Thanks.

the mess is as much of one as you choose to make it, fwiw. The DOM has an API for a reason. One might consider it to be more of a mess would doing it all "manually" by writing the DOM yourself. You should at least look into it, the code may be a bit more verbose but the clarity, predictability, intent, and readability will more than make up for it.

[Corbeau]

Sorry, didn't mean to sound daft. I will definitely look into it. But considering the time I have at hand, it will take a lot more time than I had planned. That's what I meant by "mess": other things I'll have to reconsider.

 

Thanks again.

[davej]

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.

[...]

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.

 

I have some difficulty understanding what you are really asking for.

 

Do you merely want to move the "X" around inside the table? Or are you expanding the number of table-cells with each click?

 

If you are merely moving the "X" around then there is no reason to re-create the table.

 

And why must this involve recursion?

[justsomeguy]

That's true, you could just remove the X from one cell and add it to another, and when your click handler runs you can get the innerHTML of the cell that was clicked and see if the X is in it.

[Corbeau]

Like I said, this is a drastically simplified version of what I'm trying to do. To expand on it a bit, I'm trying to make this click-on-a-cell trigger a lot more stuff and was hoping this example would show me roughly how to do it.

 

Basically, yeah, it's a game where the table is a part of a (much) larger map; when click happens, coordinates that were clicked on are used to move the map (ship is constantly in the centre), recalculate new coordinates, put into "visual range" (into the table on the screen) everything that needs to be put there from the database and offer additional options depending on what is on the tile/cell that the ship is on now.

 

Anyway, a lot of work in all directions and, this being a side-side-side-side-project of mine and interface programming the part that I'm least interested in (I was also considering doing just the ASCII version in C, and then decided that would REALLY be far too much retro), I was looking for a shortcut. But I guess no such thing as a free lunch

 

As for the confusion, all the things you see as weird are probably the result of my limited understanding of JavaScript. I know programming, but I don't know the specifics of the language, I'm afraid. Thanks again for trying to help and sorry for the confusion.

[Ingolme]

It is very inefficient to add and remove nodes from the DOM. What you should have is an internal data structure that's a single- or two-dimensional array with numbers in it. On each game cycle you would read the array and write its contents into the cells of an existing table.

 

The entirety of the game is played in the data structure while the table is only used to represent it visually to the user.