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?
