We Keep Coding

Button event lost after first click

I have a parent HTML page. It embeds an iframe containing a child HTML page.
The child HTML stores a block of HTML, including a "close" button, into a JS variable, and pass this variable to parent JS function upon a click of a "Show" button in the child HTML. This "Show" button has an addEventListener() on click. The goal of this button is to display the block of HTML code on top of the parent HTML.
I managed to make this block of HTML display on top of the parent HTML when I click "Show", the close button in this block will "display: none" upon clicking the cross button.
However, any further click of the "Show" button in the child HTML will not work; the button is broken and has no action.
Child HTML:
var plan0 = '<div class="popup">'+
'<span id="closeMe">×</span>'+
'other content here'+
'</div>';
document.getElementById("open0").addEventListener("click", function(event) {
event.preventDefault();
parent.showPopup(plan0);
}
Parent HTML:
<div>
<iframe id="channelFrame" scrolling="no" style="width: 100%; border: 1px; overflow: hidden" src="child.html"></iframe>
</div>
<div id="popup"></div>
<script>
function showPopup(info) {
var popup = document.getElementById("popup");
popup.innerHTML = info;
var closeMe = document.getElementById("closeMe");
if (closeMe) {
closeMe.onclick = function() {
popup.style.display = "none";
popup.innerHTML = "";
}
}
}
</script>
There is no error in console, and the "event" is still clearly marked in the "Show" button.
Where is the error?

On the first click on close, you are hiding the popup with
popup.style.display = "none";
but never un-hide it. Any subsequent actions will happen in a hidden tag, so you don't see anything.
Try something like:
function showPopup(info) {
var popup = document.getElementById("popup");
popup.innerHTML = info;
popup.style.display = "block"; // <------ show it again
var closeMe = document.getElementById("closeMe");
if (closeMe) {
closeMe.onclick = function() {
popup.style.display = "none";
popup.innerHTML = "";
}
}
}

How to delay a submit event until another event is completed in JS?

I'm making a chrome extension that creates and pops up an overlay once a specific button is clicked. Clicking the button on the current page takes it to another one. I'd like to pop an overlay once the button is clicked, and only take it to the next page once the overlay is closed. This is my first project using JS so I'm a bit lost.
This is how I create the overlay
//injecting css
var link = document.createElement("link");
link.href = chrome.extension.getURL("css/overlay.css");
link.type = "text/css";
link.rel = "stylesheet";
document.head.appendChild(link);
//setting button's ID for easy referencing
var button = document.getElementsByName("proceedToCheckout")[0].setAttribute("id", "proceedToCheckout");
var overlay = document.createElement("DIV");
overlay.setAttribute("id", "overlay");
document.body.appendChild(overlay);
var url = chrome.extension.getURL("terry.jpg");
var img = document.createElement("IMG");
img.setAttribute("id", "terryImage");
img.setAttribute("src", url);
overlay.appendChild(img);
and this is how I go about the main click function
document.getElementById("proceedToCheckout").addEventListener("click", function()
{
alert("Do you really need that?");
document.getElementById("overlay").style.display = "block";
event.preventDefault();
//disable overlay once clicked
document.getElementById("overlay").addEventListener("click", function (){
document.getElementById("overlay").style.display = "none";
})
})
Since I'm using event.preventDefault(), it does not let me continue the event. Is there any other way I can go about this? Thanks.

Javascript Styling Link

First disclosure: I have a lot of scripts running on this particular page.
I have a div of text that I have on page load, now there is a specific link which is toggled to this text, based on clicking on the link. WHEN the page is loaded, I want just the link to be a certain color.
Here is what I have for the text so far... which is displaying on pageload:
<script>
window.onload=function showDiv() {
document.getElementById('d1').style.display = "block";
}
</script>
Now I need to have my link a specific color on page load, but that color must be able to change back to its CSS default when another link is clicked:
Innovative Design Methodology
Like I said, there are other scripts I have running on this page, hence you see in the link.
Just for fun, here's my other code (toggling text & highlighting code):
<script type="text/javascript">
var currentItem;
function unhide(divID) {
if (currentItem) {
currentItem.className = 'hidden';
currentItem = null;
}
var item = document.getElementById(divID);
if (item) {
item.className = 'unhidden';
currentItem = item;
}
}
</script>
<script type="text/javascript">
var currentLink = null;
function changeLinkColor(link){
if(currentLink!=null){
currentLink.style.color = link.style.color;
}
link.style.color = '#f5b331';
currentLink = link;
}
</script>

You could add a css class on the anchor tag initially (which has your custom styling) and remove it on click on any of the links.
Your HTML
<a id="link1" class='CustomColor'></a>
And your CSS
.CustomColor
{
color:red;
}
And On click of any link,
document.getElementById("link1").className =
document.getElementById("link1").className.replace('CustomColor','');

Javascript - Function works once, but never again

I'm building a very simple lightbox script; when you click a button, the lightbox is created. When you click on the lightbox background, it is removed.
The first time you call the function it works just fine. Click button, lightbox shows, click lightbox, it disappears. However, if you try to click the button AGAIN, nothing happens - the div isn't called. No console errors or anything, don't know what the problem is.
JSFIDDLE http://jsfiddle.net/3fgTC/
CODE
function closeLightBox(){
document.body.removeChild(lightBox);
}
function createElem(){
var elem = "<div id='lightBox'></div>";
var bodyElem = document.body;
bodyElem.innerHTML = elem + bodyElem.innerHTML;
var lightBox = document.getElementById("lightBox");
lightBox.style.width = "100%";
lightBox.style.height = "800px";
lightBox.style.backgroundColor = "rgba(0,0,0,.5)";
lightBox.onclick = function(){
closeLightBox();
}
}
var button = document.getElementsByClassName("btn");
for (var i = 0; i<button.length; i++){
button[i].onclick = function(){
createElem();
}
}
Any ideas?

Don't prepend to innerHTML; that makes the browser re-parse the HTML and re-create every DOM element, losing event handlers in the process. Instead, use document.createElement:
var lightBox = document.createElement('div');
document.body.insertBefore(lightBox, document.body.firstChild);
Furthermore, inline closeLightBox:
lightBox.onclick = function() {
document.body.removeChild(lightBox);
}
Try it.

target="_blank" with a custom javascript-generated html page

I have a code highlight block for which I would like to have an option where you click on a button and it opens up a new HTML page where it displays the "raw" content of the highlight. I have the code ready in raw form and the link prepared with target="_blank", but I can't seem to get it to open up a new page.
This is what my HTML looks like:
Click to view HTML
And this is my javascript
//when clicked
link.href = 'javascript:document.write("...");';
//the click event should continue as normal
This should open up a new page with "..." as the content, but it doesn't work (it just opens up the existing page).
Is there anyway to do this without using popups?

function writeToWindow(content) {
var newWin = window.open('','newWin','width=300,height=200');
newWin.document.open();
newWin.document.writeln("<html><head><title>Console</title></head><body>" + content + "</body></html>");
newWin.document.close();
}
call it
onclick="writeToWindow('text to display');"

Do you have to use a new window? I think is easier to use a layer.
<div id="toggleText" style="border:solid black 1px; display:none;height:100px;width:100px">
<span id="displayText"></span>
</div>
<script language="javascript">
func tion toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>