Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts

    Document.getElementById(element) is null

    Code:
    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
    Code:
    <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
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Look carefully:

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

  • #3
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    ...wow how did I miss that...well thanks but now I'm still getting the same error
    Last edited by elitis; 01-19-2013 at 11:05 AM.
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #4
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    could it be that the script is looking for the elements before they've loaded?
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    You named it "underLine" in the HTM and "underline" in the JS code.

  • #6
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    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...
    Last edited by elitis; 01-19-2013 at 06:17 PM.
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by AndrewGSW View Post
    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.)
    Code:
    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);}
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Your dollar function is not returning anything:

    Code:
    function $(element){ return document.getElementById(element);}
    and attachEvent only has the first two arguments.

    Have you correctly configured all the other functions: iForeColor, etc..
    Last edited by AndrewGSW; 01-19-2013 at 08:21 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Last edited by AndrewGSW; 01-19-2013 at 08:28 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    seems to work fine if I add
    Code:
    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:
    Code:
    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:
    Code:
    <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>
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #12
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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:

    Code:
            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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #14
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    Moved script tag one line above closing body element
    Results: Nothing
    Moved eventlisteners into function under the window.onload event
    results: nada

    Code:
    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);}
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #15
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    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
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •