RobberBaron Posted January 15, 2011 Share Posted January 15, 2011 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 More sharing options...
Synook Posted January 15, 2011 Share Posted January 15, 2011 Have you checked the value of $.Name within that function? Link to comment Share on other sites More sharing options...
thescientist Posted January 15, 2011 Share Posted January 15, 2011 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? Link to comment Share on other sites More sharing options...
RobberBaron Posted January 15, 2011 Author Share Posted January 15, 2011 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 More sharing options...
jeffman Posted January 15, 2011 Share Posted January 15, 2011 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 More sharing options...
RobberBaron Posted January 15, 2011 Author Share Posted January 15, 2011 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 More sharing options...
jeffman Posted January 15, 2011 Share Posted January 15, 2011 Maybe your DOM Inspector can shed some light. Or try to alert a chunk of innerHTML that contains the element. Link to comment Share on other sites More sharing options...
thescientist Posted January 15, 2011 Share Posted January 15, 2011 does the behavior change if you append it to document.ready instead? Link to comment Share on other sites More sharing options...
Zaper Gallis Posted January 16, 2011 Share Posted January 16, 2011 just a thought, i found on some stuff that i tried the getElementById wont work, i had to navigate to it threw the nodes (e.g. document.form1.element.value). Maybe your running into a similar issue? Link to comment Share on other sites More sharing options...
jeffman Posted January 16, 2011 Share Posted January 16, 2011 @Zaper Gallis: programming is not magic. If document.getElementById doesn't work, something in the document is broken. Link to comment Share on other sites More sharing options...
RobberBaron Posted January 16, 2011 Author Share Posted January 16, 2011 I inserted a bunch of alerts on page load. If I alert someblock.GetObject(), that alert and any following alerts won't show, however no errors show in the console. Link to comment Share on other sites More sharing options...
jeffman Posted January 16, 2011 Share Posted January 16, 2011 I think the time has come to post your whole document (no css) or provide a link (ideally). I feel like we're just taking shots in the dark. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 16, 2011 Share Posted January 16, 2011 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 More sharing options...
Zaper Gallis Posted January 16, 2011 Share Posted January 16, 2011 @Zaper Gallis: programming is not magic. If document.getElementById doesn't work, something in the document is broken.Was just a thought. Never said it was magic, just something that worked for me. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 16, 2011 Share Posted January 16, 2011 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 More sharing options...
RobberBaron Posted January 17, 2011 Author Share Posted January 17, 2011 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 More sharing options...
RobberBaron Posted February 16, 2011 Author Share Posted February 16, 2011 Chronology:-window.onload()-Loop executes that draws many divs with incremential ids-Code tries to call getElementById on divs, but it for some reason returns null Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.