Jump to content

JS: document.getElementById() not working in IE8


tinfanide

Recommended Posts

Why the js codes below do not work in IE8, but do in Firefox?Is there any way to apply, in terms of js (not css), the textDecoration style to the anchor link in IE?

<!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>java script: Styling - Anchors</title>  </head>  <body><a name="Yahoo" id="link" href="http://www.google.com/"></a>  <script>   document.anchors['Yahoo'].innerHTML="Yahoo!";   document.getElementById('link').style.textDecoration = "none";   </script>  </body>  </html>

Another question (out of curiosity):I tried to put the <script>*</script> codes before the <a>*</a>. It does not work.But when I put the script after the <a>, it works.Could anyone who knows js scripting explain it?

<script>   document.anchors['Yahoo'].innerHTML="Yahoo!";   document.getElementById('link').style.textDecoration = "none";   </script><a name="Yahoo" id="link" href="http://www.google.com/"></a>

Many thanks for any help!!!

Link to comment
Share on other sites

It's generally not a great idea to use names to refer to elements on the page. Not all browsers might support document.anchors, for example. It would be better to use IDs on the elements and use document.getElementById to look them up. All browsers support that.

Link to comment
Share on other sites

Another question (out of curiosity):I tried to put the <script>*</script> codes before the <a>*</a>. It does not work.But when I put the script after the <a>, it works.Could anyone who knows js scripting explain it?
When placed BEFORE the targeted element, and when the js code is reached it is executed straight away, before the element it is referencing, is rendered/created on the page, so it won't find it, and give a error. When placed AFTER the element, it can now reference this element, and do its thing, and now is error free.
Link to comment
Share on other sites

When placed BEFORE the targeted element, and when the js code is reached it is executed straight away, before the element it is referencing, is rendered/created on the page, so it won't find it, and give a error. When placed AFTER the element, it can now reference this element, and do its thing, and now is error free.
Yes, I sorted it out afterwards. Thanks for the reminder.
Link to comment
Share on other sites

It's generally not a great idea to use names to refer to elements on the page. Not all browsers might support document.anchors, for example. It would be better to use IDs on the elements and use document.getElementById to look them up. All browsers support that.
Yes, later on I tested on it by sticking to document.getElementById. It is just fine with Firefox and IE.P.S.:I really don't get a good feeling with js document.getElementById(). It seems to only work within a function that needs somewhere in the HTML to execute. My scripting knowledge is not so good that my comments may not be that understandable. Sorry for that. But by contrast I like jQuery more than js. $('id/class/tag')... This way is just super convenient and light. Js seems to be not able to achieve that effect so lightly, to the best of my js knowledge.Thanks for your remark. Learnt a lot.
Link to comment
Share on other sites

Be aware that jQuery is just a library of JavaScript code. Buried somewhere in the functions you like are calls to things like document.getElementById(). jQuery just simplifies certain tasks for developers.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...