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?

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.