Jump to content

Cannot getElementById


RobberBaron
 Share

Recommended Posts

I have a script with a function in that I'm going to use as a class. It has some code like this:

function Block(){	var $=this;	$.Name='Block1';	$.Draw=function(){		window.document.write('<div id="'+$.Name+'"> </div>');	};	$.GetObject=function(){		return window.document.getElementById($.Name);	};};

Obviously it's more complicated than that. So, I plan to use it as a class, like var a=new Block();But my problem is, even after I'm sure the element exists on the page from $.Draw, $.GetObject() still returns null. This makes many other functions fail also. The exact error is "Uncaught TypeError: Cannot set property 'onmousedown' of null", because later I use a loop to Draw a bunch of blocks and set an onmousedown property.Any help would be gladly appreciated, and I can offer virtual cookies.

Link to comment
Share on other sites

I think you are having problems with scoping. Why not just use this explicitly?

function Block(){	this.Name='Block1';	this.Draw=function(){		window.document.write('<div id="'+this.Name+'"> </div>');	};	this.GetObject=function(){		return window.document.getElementById(this.Name);	};};

do you plan on passing the ID dynamically each time you create a new instance of the block class? How did you verify the creation of the element with Draw?

Edited by thescientist
Link to comment
Share on other sites

I use a loop to draw a bunch of blocks with different colors, which all show. The block's Name is decided from a counter that increases every time a block is created. The blocks definitely exist, and $.Name works. The reason I didn't use "this" was because I was unsure whether using "this" inside a sub function would reference the main function or the child, since you are assigning values to a this in one function I presumed the context wouldn't matter. If I comment out the area where GetObject() is used, and use the console, I can easily use document.getElementById('Block1') to find an element. So it only breaks in the sub function....how odd...

Link to comment
Share on other sites

Do you execute these object methods before or after the page has finished loading?If before, then the elements you are trying to reference probably have not been added to the DOM yet, so the references will come back null.If after, and you execute .Draw first, the document.write business will completely obliterate your document, and a subsequent call to GetObject will return null, if indeed it executes at all. (document.write is famously dangerous in this way.)

Link to comment
Share on other sites

The code is called as a handler to window.onload. After commenting out the section using GetObject, I've added a boolean to check if the Block has been drawn, so if it hasn't been drawn it will loop until the object can be found. Yet $.GetObject still returns null. I can easily get the Block object itself, and even the Block's name, but even after the Block has definitely been drawn and the class instance definitely exists, using document.getElementById still fails.

Link to comment
Share on other sites

you should be initiating the class functions similar to this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function Block(){	var $=this;	$.Name='Block1';	$.Draw=function(){		 window.document.write('<div id="'+$.Name+'">This Is Div Container with Id ref of "'+$.Name+'"</div>');	};	$.GetObject=function(){	return document.getElementById($.Name).innerHTML;	};};/*--*//*]]>*/</script><style type="text/css"></style></head><body><script type="text/javascript">/*<![CDATA[*//*---->*/addblock = new Block()addblock.Draw();alert(addblock.GetObject())/*--*//*]]>*/</script></body></html>

Link to comment
Share on other sites

As already mentioned the problem is more likely to do in the use of document.write, it tends to cause more problems than its worth, one problem in running you code is that it seemed to be going through a loop as in the hourglass showing, as though it is still processing.It is better to send data/values etc to an element using getElementById() as used below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function Block(){	var $=this;	$.Name='Block1';	$.Move_Blocks_Here='';	$.Joined_blocks='';	$.Draw=function(){	return '<div id="'+$.Name+'">This Is Div Container with Id ref of "'+$.Name+'"</div>';	};	$.GetObject=function(){	return document.getElementById($.Move_Blocks_Here).innerHTML=$.Joined_blocks;	};};window.onload = function(){addblock = new Block()block_join="";for(i=1; i<5;i++){addblock.Name='Block'+i;block_join += addblock.Draw();}addblock.Move_Blocks_Here='block_container';addblock.Joined_blocks=block_join;addblock.GetObject();}/*--*//*]]>*/</script><style type="text/css">#Block1, #Block2, #Block3, #Block4{ width:200px; height:200px; float:left;}#Block1 {background-color:#FF0066;}#Block2{ background-color:#FF9933;}#Block3{ background-color:#00CC33;}#Block4{ background-color:#3366FF;}</style></head><body><div id="block_container"></div></body></html>

Link to comment
Share on other sites

The GetObject() function is used to set events and values in the DOM on the div, so if it just returns the innerHTML it won't help much. Also, instead of

addblock = new Block()block_join="";for(i=1; i<5;i++){addblock.Name='Block'+i;block_join += addblock.Draw();}

it would be more

for(i=1; i<5;i++){addblock = new Block()block_join="";addblock.Name='Block'+i;block_join += addblock.Draw();}

Because it's making lots of blocks which will then be used later.I've put the test file on the internet, but I'm not sure it will help all that much: http://www.robberbaron.evinext.com/pixelgr...nt-example.html

Link to comment
Share on other sites

  • 5 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...