mbeals Posted March 30, 2009 Share Posted March 30, 2009 I have a script that changes the src attribute of an img tag. When I fetch the object reference through document.getElementById(), IE returns the error: "Object doesn't support this property or method" It works fine in firefox. Did MS discontinue the id property of img tags? Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted March 30, 2009 Share Posted March 30, 2009 can we see the actual full code ??? Quote Link to comment Share on other sites More sharing options...
mbeals Posted March 31, 2009 Author Share Posted March 31, 2009 <script> var img_tag = document.getElementById('img_1'); alert(img_tag.src); </script> <img id='img_1' src='images/testimage.jpg' /> That's quick and dirty code that breaks. I could post everything, but I know it's a combo of that html img tag and that getElementById() call; [/code] Quote Link to comment Share on other sites More sharing options...
corbin Posted March 31, 2009 Share Posted March 31, 2009 The JS is being ran before the img object is created and entered into the DOM. Quote Link to comment Share on other sites More sharing options...
mbeals Posted March 31, 2009 Author Share Posted March 31, 2009 in the actual code though that statement is part of a function. I also have other getElementById() calls for other objects (tr,a, etc) that work fine. Here's actual full code: function load_obs(){ wo_textbox = document.getElementById('wo_number'); wo_hlink = document.getElementById('wo_link'); wo_img = document.getElementById('wo_img'); } function change_button(style){ load_obs(); switch(style){ case 'edit': wo_hlink.setAttribute('onClick', 'wo_edit()'); wo_hlink.title = 'edit'; wo_img.src = 'images/edit.png'; break; case 'save': wo_hlink.setAttribute('onClick', 'commit_wo()'); wo_hlink.title = 'save'; wo_img.src = 'images/accept.jpg'; break; } } <a href="#" onClick='commit_wo()' id='wo_link' ><img src='images/accept.jpg' alt='accept' width='16' height='16' border='0' id='wo_img'/></a> Quote Link to comment Share on other sites More sharing options...
corbin Posted March 31, 2009 Share Posted March 31, 2009 Variable scope.... Aye.... Once load_obs() is called, those variables are freed since they are not global. You could do: var wo_textbox; var wo_hlink; var wo_img; function load_obs(){ wo_textbox = document.getElementById('wo_number'); wo_hlink = document.getElementById('wo_link'); wo_img = document.getElementById('wo_img'); } ....... But it's usually a good idea to avoid global variables entirely. You could either make load_obs return an array, or you could just put the code from load_obs in change_button(). Quote Link to comment Share on other sites More sharing options...
mbeals Posted March 31, 2009 Author Share Posted March 31, 2009 It's interesting though that it works in firefox and the the img tag is the only one that breaks. I have tried to declair them each time in the calling function, and the img tag still breaks: function test(){ img_tag = document.getElementById('img_1'); alert(img_tag.src); } This pukes in IE too (but not firefox). Change img_1 to an a tag, and all is good. edit.... apparently that dies, but function test(){ var img_tag = document.getElementById('img_1'); alert(img_tag.src); } does not. I was under the impression that declaring a variable without a 'var' statement inside a function made that variable a global. I think I'm going to do the returned array route though Quote Link to comment Share on other sites More sharing options...
corbin Posted March 31, 2009 Share Posted March 31, 2009 Hrmmm, that's extremely odd.... Perhaps the src property is not a property of the element class under IE. Just to make sure it's finding the object right, try: var img_tag = ........ alert(typeof img_tag); This is just weird.... Then try doing a typeof of img_tag.src. Quote Link to comment Share on other sites More sharing options...
mbeals Posted March 31, 2009 Author Share Posted March 31, 2009 so I made a brand new page : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type='text/javascript'> function with_var(){ var img_tag = document.getElementById('image'); alert(typeof img_tag); alert(typeof img_tag.src); } function without_var(){ img_tag = document.getElementById('image'); alert(typeof img_tag); alert(typeof img_tag.src); } </script> </head> <body> <img src='images/lock.gif' id='image'> <a href='#' onClick='with_var()'>With Var</a> <a href='#' onClick='without_var()'>Without Var</a> </body> </html> and it works the same in both IE and firefox...no errors img_tag is a object and img_tag.src is a string. I put the same functions in my main script page and it dies. There has to be something else in there interfering. I guess I have some digging to do. Thanks for your help. Quote Link to comment Share on other sites More sharing options...
corbin Posted March 31, 2009 Share Posted March 31, 2009 Yeah I was kinda starting to suspect it was something else in there. Something you could do would be to make sure the HTML validates (or atleast no major errors). Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted March 31, 2009 Share Posted March 31, 2009 Fixed some invalid HTML: <img src='images/lock.gif' id='image' alt="** PLEASE DESCRIBE THIS IMAGE **" name="image"> <img id='img_1' src='images/testimage.jpg' alt="** PLEASE DESCRIBE THIS IMAGE **" name="img_1"> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.