Document.getElementById(element) is null

[elitis]

if (window.addEventListener){window.addEventListener('load',iFrameOn,false);}
else if (document.addEventListener){document.addEventListener('load',iFrameOn,false);}

document.getElementById('bold').addEventListener('click',iBold,false);
document.getElementById('underline'),addEventListener('click',iUnderline,false);
document.getElementById('italic').addEventListener('click',iItalic,false);
document.getElementById('fontColor').addEventListener('click',iForeColor,false);
document.getElementById('ul').addEventListener('click',iUnorderedList,false);
document.getElementById('ol').addEventListener('click',iOrderedList,false);
document.getElementById('img').addEventListener('click',iImage,false);
document.getElementById('deny').addEventListener('click',denyFR,false);
document.getElementById('accept').addEventListener('click',acceptFR,false);
document.getElementById('sbmt').addEventListener('click',sendData,false);

function iFrameOn(){richTextField.document.designMode = 'On';}
function iBold(){richTextField.document.execCommand('bold',false,null);}
function iUnderline(){richTextField.document.execCommand('underline',false,null);}

In the html page

<a id="bold" class="button" href="">B</a>
<a id="underLine" class="button" href="">U</a>
								<a id="italic" class="button" href="">I</a>
								<a id="fontColor" class="button" href="">Color</a>
								<a id="ul" class="button" href="">UL</a>
								<a id="ol" class="button" href="">OL</a>
								<a id="img" class="button" href="">Image</a>
								<input id="sbmt" class="submit_button" type="button" name="submit" value="Post" />

In chrome its giving me the error: Uncaught TypeError: Cannot call method 'addEventListener' of null

[Logic Ali]

Look carefully:

document.getElementById('underline'),addEventListener('click',iUnderline,false);

[elitis]

...wow how did I miss that...well thanks but now I'm still getting the same error

[elitis]

could it be that the script is looking for the elements before they've loaded?

[Airblader]

You named it "underLine" in the HTM and "underline" in the JS code.

[elitis]

wow lol thanks but now the functions aren't working. I'm not getting an error but the functions cease to do what their supposed to. They don't do anything.

Edit: an inline onclick event handler seems to work. Why won't the event listener...

[AndrewGSW]

execCommand was originally IE only and may not be available in other browsers.

As mentioned in a previous post, your code that uses getElementById should not run until after the page has loaded and the elements are available to be referred to.

[elitis]

Originally Posted by AndrewGSW

execCommand was originally IE only and may not be available in other browsers.

As mentioned in a previous post, your code that uses getElementById should not run until after the page has loaded and the elements are available to be referred to.

I've checked it in IE9, Chrome (23 I think), and Firefox 18.01. It doesn't work in ANY of them. But like I said before it works fine in all browsers if I use an inline onclick event handler.
Updated code: (NOTE: I am not using jQuery.)

if (window.addEventListener){window.addEventListener('load',iFrameOn,false);}
else if (document.addEventListener) { 
	document.addEventListener('load',iFrameOn,false);
	$('bold').addEventListener('click',iBold,false);
	$('underLine').addEventListener('click',iUnderline,false);
	$('italic').addEventListener('click',iItalic,false);
	$('fontColor').addEventListener('click',iForeColor,false);
	$('ul').addEventListener('click',iUnorderedList,false);
	$('ol').addEventListener('click',iOrderedList,false);
	$('img').addEventListener('click',iImage,false);
	$('deny').addEventListener('click',denyFR,false);
	$('accept').addEventListener('click',acceptFR,false);
	$('sbmt').addEventListener('click',sendData,false);
}
else if (document.attachEvent){document.attachEvent('onload',iFrameOn,false);}

function $(element){document.getElementById(element);}
function iFrameOn(){richTextField.document.designMode = 'On';}
function iBold(){richTextField.document.execCommand('bold',false,null);}
function iUnderline(){richTextField.document.execCommand('underline',false,null);}

[AndrewGSW]

Your dollar function is not returning anything:

function $(element){ return document.getElementById(element);}

and attachEvent only has the first two arguments.

Have you correctly configured all the other functions: iForeColor, etc..

[AndrewGSW]

Also, you should definitely not be using tag-names 'ul', 'img' as ids. If you are expecting your dollar function to return the first of these elements (as jQuery does) then you will need to add further code to your dollar function (but still not using them as ids).

And document.onload is not universally supported; presumably you should be using window.onload.

[elitis]

seems to work fine if I add

document.getElementById('bld').addEventListener('click',iBold,false);

through the console. Could that mean the elements haven't loaded yet?
As for the dollar function, I added it as a means of shortening the code. Seemed redundant to keep typing out document.getElementById() when I could simplify it.

Updated code:
Javascript:

if (window.addEventListener){window.addEventListener('load',iFrameOn,false);}
else if (document.addEventListener) { 
	document.addEventListener('load',iFrameOn,false);
	$('bld').addEventListener('click',iBold,false);
	$('undrline').addEventListener('click',iUnderline,false);
	$('italic').addEventListener('click',iItalic,false);
	$('fontColor').addEventListener('click',iForeColor,false);
	$('unlist').addEventListener('click',iUnorderedList,false);
	$('orlist').addEventListener('click',iOrderedList,false);
	$('imge').addEventListener('click',iImage,false);
	$('deny').addEventListener('click',denyFR,false);
	$('accept').addEventListener('click',acceptFR,false);
	$('sbmt').addEventListener('click',sendData,false);
}
else if (document.attachEvent){document.attachEvent('onload',iFrameOn);}
else if (window.attachEvent){window.attachEvent('onload',iFrameOn);}

function $(element){return document.getElementById(element);}
function iFrameOn(){richTextField.document.designMode = 'On';}
function iBold(){richTextField.document.execCommand('bold',false,null);}
function iUnderline(){richTextField.document.execCommand('underline',false,null);}
function iItalic(){richTextField.document.execCommand('italic',false,null);}
function iForeColor() {
	var color = prompt('Enter a color', '');
	richTextField.document.execCommand('ForeColor',false,color);
}
function iUnorderedList() {
	richTextField.document.execCommand('InsertUnorderedList',false,'newUL');
}
function iOrderedList() {
	richTextField.document.execCommand('InsertOrderedList',false,'newOL');
}
function iImage() {
	var imgSrc = prompt('Enter image location', '');
	if (imgSrc != null) {
		richTextField.document.execCommand('insertimage',false,imgSrc);
	}
}
function denyFR() {
	var dfrHR = new XMLHttpRequest();
	var frURL = "fRequest.php";
	var denyRequest = 2;
	var statusOfRequest = "frStatus="+denyRequest;
	dfrHR.open("POST", frURL, true);
	dfrHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	dfrHR.onreadystatechange = function() {
		if (dfrHR.readyState == 4 && dfrHR.status == 200) {
			$('fStatus').innerHTML = "Friend request denied";
		}
	}
	dfrHR.send(statusOfRequest); 
}
function acceptFR() {
	var afrHR = new XMLHttpRequest();
	var URL = "fRequest.php";
	var acceptRequest = 1;
	var aRequestStatus = "frStatus="+acceptRequest;
	afrHR.open("POST", URL, true);
	afrHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	afrHR.onreadystatechange = function() {
		if (afrHR.readyState == 4 && afrHR.status == 200) {
			$('fStatus').innerHTML = "Friend request accepted";
		}
	}
	afrHR.send(aRequestStatus);
}
function sendData() {
	var hr = new XMLHttpRequest();
	var url = "rtf.php";
	var usrname = $('author').value;
	var txtField = window.frames['richTextField'].document.body.innerHTML;
	var vars = "author="+usrname+"&post="+txtField;
	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;
		$('status').innerHTML = return_data;
	}
}
	hr.send(vars);
	$('status').innerHTML = "Posting...";
	}

HTML:

<iframe name="richTextField" id="richTextField"></iframe>
							<br />
							<div id="wysiwyg_bottom">
								<a id="bld" class="button" href="#">B</a>
								<a id="undrline" class="button" href="#">U</a>
								<a id="italic" class="button" href="#">I</a>
								<a id="fontColor" class="button" href="#">Color</a>
								<a id="unlist" class="button" href="#">UL</a>
								<a id="orlist" class="button" href="#">OL</a>
								<a id="imge" class="button" href="#">Image</a>
								<input id="sbmt" class="submit_button" type="button" name="submit" value="Post" />
							</div>
							<p id="status"></p>
						</form>

[AndrewGSW]

Could that mean the elements haven't loaded yet?

Yes, as has been mentioned a couple of times . You need to run the code that attaches events (using getElementById) after the page has loaded. You could either move it into code that runs on the window-load event or move all your JS to the bottom of the page, just before the closing BODY tag.

You might use a slightly extended version of your dollar-function:

        var $ = function () {
            // Example: var els = $('obj1name',obj2,'obj2name');
            // Saves having to write 'document.getElementById' repeatedly,
            // but could also be useful for grouping elements.
            var elements = {}, argLen, i, element; 
            for (i = 0, argLen = arguments.length; i < argLen; i++) {
                element = arguments[i];
                if (typeof element === 'string')
                    element = document.getElementById(element);
                if (argLen === 1)
                    return element;
                elements.push(element);
            }
            return elements;
        };

It is no where near as comprehensive as jQuery's but slightly more flexible than your current version. You can supply it a string (an elements' id), an element-object reference, or several of these separated by commas.

[felgall]

The script tag should be immediately before the </body> tag - if it isn't there then try moving it there. That way you know all the HTML has loaded before the script tries to access it.

[elitis]

Moved script tag one line above closing body element
Results: Nothing
Moved eventlisteners into function under the window.onload event
results: nada

if (window.addEventListener){window.addEventListener('load',iFrameOn,false);}
else if (document.addEventListener) { 
	document.addEventListener('load',iFrameOn,false);
	window.onload = function() {
		$('bld').addEventListener('click',iBold,false);
		$('undrline').addEventListener('click',iUnderline,false);
		$('italic').addEventListener('click',iItalic,false);
		$('fontColor').addEventListener('click',iForeColor,false);
		$('unlist').addEventListener('click',iUnorderedList,false);
		$('orlist').addEventListener('click',iOrderedList,false);
		$('imge').addEventListener('click',iImage,false);
		$('deny').addEventListener('click',denyFR,false);
		$('accept').addEventListener('click',acceptFR,false);
		$('sbmt').addEventListener('click',sendData,false);
	}
}
else if (document.attachEvent){document.attachEvent('onload',iFrameOn);}
else if (window.attachEvent){window.attachEvent('onload',iFrameOn);}

function $(element){return document.getElementById(element);}
function iFrameOn(){richTextField.document.designMode = 'On';}
function iBold(){richTextField.document.execCommand('bold',false,null);}
function iUnderline(){richTextField.document.execCommand('underline',false,null);}

[elitis]

Got it working. Realized I had everything under document.addEventListener() when the browsers (at least the three I'm using) support eventlisteners under the window object