Exit link won't show up with popup div

[elitis]

Everything was working fine until I added an AJAX call in. Now, I'm not sure what the problem is. When the link 'friends' is clicked, the event listener is supposed to call the activatePopUp() function. This part it does fine. Inside this function in addition to changing the styles on the other elements it should change the style on the exitPopUp link so that it is displayed as well. This is also fine, until it calls AJAX. Once the results from the PHP file are returned, the exitPopUp link disappears.

<li><a id="friends" href="#">Friends</a></li>
<div id="popup">
					<a id="exitPopUp" href="#" >X</a>
				</div>

Pop Up div functions

function activatePopUp() {
		document.getElementById('main').style.opacity = '0.5';
		//For profile pages only
		if (document.getElementById('profile')) {
			document.getElementById('profile').style.opacity = '0.5';
			getFriends();
			}
		document.getElementById('content').style.opacity = '0.5';
		document.getElementById('footer').style.opacity = '0.5';
		document.getElementById('popup').style.display = 'block';
		document.getElementById('exitPopUp').style.display = 'block';
	}
function deactivatePopUp() {
		document.getElementById('main').style.opacity = '1.0';
		if (document.getElementById('profile')) {document.getElementById('profile').style.opacity = '1.0';}
		document.getElementById('content').style.opacity = '1.0';
		document.getElementById('footer').style.opacity = '1.0';
		document.getElementById('popup').style.display = 'none';
		document.getElementById('exitPopUp').style.display = 'none';
	}
	
function getFriends() {
	var hr = new XMLHttpRequest();
	var url = "/ajax/gf.php";
	if (document.getElementById('username')) {var username = document.getElementById('username').innerHTML;}
	var vars = "username="+username;
	if (document.getElementById('fullName')) {var usrFullName = document.getElementById('fullName').innerHTML;}
	hr.open("POST", url, true);
	hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	hr.onreadystatechange = function() {
	if (hr.readyState === 4 && hr.status === 200) {
		var return_data = hr.responseText;
		document.getElementById('popup').innerHTML = "<h1 class='special'>"+usrFullName+"'s Friends</h1><hr />"+return_data;
	}
}
hr.send(vars);
}

if (document.getElementById('friends')) {document.getElementById('friends').addEventListener('click', activatePopUp, false);}
window.onload = document.getElementById('exitPopUp').addEventListener('click', deactivatePopUp, false);

Edit: When I add in

document.getElementById('exitPopUp').style.display = 'block';

to the console I get TypeError: Cannot read property 'style' of null

[Logic Ali]

Originally Posted by elitis

Edit: When I add in

document.getElementById('exitPopUp').style.display = 'block';

to the console I get TypeError: Cannot read property 'style' of null

That's because document.getElementById('exitPopUp') no longer exists, having been hosed by this statement:

document.getElementById('popup').innerHTML = "<h1 class='special'>"+usrFullName+"'s Friends</h1><hr />"+return_data;

Try

document.getElementById('popup').innerHTML += "<h1 class='special'>"+usrFullName+"'s Friends</h1><hr />"+return_data;

[elitis]

well that solves the original problem. Nice to know that innerHTML replaces the content. I originally thought it just added in addition to the content, like the += does. offtopic: but are "all" javascript methods like this? (i.e document.write(), .value, etc) And now the deactivatePopUp() function ceases to work...

[Logic Ali]

Originally Posted by elitis

well that solves the original problem. Nice to know that innerHTML replaces the content. I originally thought it just added in addition to the content, like the += does. offtopic: but are "all" javascript methods like this? (i.e document.write(), .value, etc) And now the deactivatePopUp() function ceases to work...

This statement is incorrect, executing the statement immediately instead of onload:

window.onload = document.getElementById('exitPopUp').addEventListener('click', deactivatePopUp, false);

Use:

window.onload = function(){document.getElementById('exitPopUp').addEventListener('click', deactivatePopUp, false); };

[elitis]

Still nothing in regards to the exit link problem:

if (document.getElementById('friends')) {document.getElementById('friends').addEventListener('click', activatePopUp, false);}
window.onload = function(){document.getElementById('exitPopUp').addEventListener('click', deactivatePopUp, false); }