var hidden = 'yes';

var content = document.getElementById("post_two").innerHTML;
document.getElementById("post_two").innerHTML = "";

var postcontrols = document.getElementById("post_controls").innerHTML;
document.getElementById("post_controls").innerHTML = postcontrols + "<input type=\"button\" name=\"captionless_reblog\" class=\"generic\" id=\"captionless_reblog_button\" value=\"Recover Caption\" style=\"margin:0px 0px 0px 15px; \">";

function recover_remove()
{
if (hidden == 'yes')
{
document.getElementById("post_two").innerHTML = content;
hidden = 'no';
document.getElementById("captionless_reblog_button").value = "Remove Caption";
}
else if (hidden == 'no')
{
content = document.getElementById("post_two").innerHTML;
document.getElementById("post_two").innerHTML = "";
hidden = 'yes';
document.getElementById("captionless_reblog_button").value = "Recover Caption";
}
}

document.getElementById("captionless_reblog_button").addEventListener("click", recover_remove, false);
In the above code (which is a chrome extension) I want to automatically delete all the content of a 'caption' field (for Tumblr). First I store all its data into the variable content and then the field is emptied. Then, I also add a button to the Tumblr buttons to recover content into the input field. Variable hidden determines what the function recover_remove() does: If the text is already hidden (hidden == yes), it will recover the content into the field, alter the text of the extra button to "Remove Caption." if hidden == no that means the text is still in the field, and then recover_remove() will store input in content and empty the field.

Everything works perfectly, on pageload the field data is stored in content and the field emptied. The button is added. When clicking the button, the function is executed and in itself the function works great as well; it correctly alternates between recovering or removing (hidden == yes or hidden == no) and is even able to alter the the text of the button (Remove Caption or Recover Caption)

HOWEVER, it doesn't actually do anything with the fields anymore. Where document.getElementById("post_two").innerHTML works in the start, it does not in the function. I can not understand how this is possible; it can't be that I am referring to the wrong element since there is only one element with id="post_two" plus it works before the function. Chrome is not throwing any errors at me. I thought that maybe I was working on the wrong DOM level (document) but document.getElementById("captionless_reblog_button").value works just fine in the function.

Does anyone know what's going on here?