Dynamically modify content added to table via javascript

Question

What I want to do is quite straightforward, but I can't figure it out. Let's say you have this variable defined in your global scope of your script:

var contentOfRow = "<tr><td>hello</td></tr>";

Then, you have a HTML table, on top of which you have a +ADD button. On this button, you specify onlick="addRow(contentOfRow)", such that, on each click on the +ADD button, a new row is added onto the HTML table, with its content equal to the value of contentOfRow. That's where I am, all of this works.

What's not working is that, with each click on the +ADD button, I want to modify the value of contentOfRow (so inside the addRow(contentOfRow) function), such that subsequent clicks on the +ADD button simply add the programmatically updated content onto the HTML table, if clicked again. Given that the var keyword was used, I simply reassigned the value of the variable like so:

contentOfRow = "<tr><td>newContent</td></tr>";

Inside the addRow(contentOfRow) function. Yet, if I click on the +ADD button, no matter how many times, it always adds the original row with the content <tr><td>hello</td></tr>onto the table. What am I doing wrong?

Answer 1

Figured it out; if you actually store the rowContent as an object property

var content.row1 = "<tr><td>hello</td></tr>";

And then redefine that propertie's value inside the addRow()function, now not taking any parameters anymore, via simply:

content.row1 = "<tr><td>newContent</td></tr>";

everything works, and subsequent clicks on the +ADD button add "newContent" rows onto the HTML table.