IE unknown runtime error document.getElementById("blah").innerHTML

IE unknown runtime error document.getElementById("blah").innerHTML LI tags

[justins]

IE6/7 is giving me a JavaScript "unknown runtime error". I've found many discussions about IE and problems with inner joins like this, but I can't quite figure out a workaround because none of them have the ".innerHTML" on the right side of the operator. I don't understand JavaScript very well, and the acrobatics below are a mystery to me.

I have four other blocks exactly like this one which work fine, but with different names and different contents (like <p> tags instead of <li>'s). Also, this code existed before I took over the site, so at one time it worked. I've made a bunch of changes around the site, so it's hard to narrow down what might of affected this -- perhaps the doctype.

if (document.getElementById("pubsdiv")) {
if (document.getElementById("pubsright")) {
vPubsDiv = document.getElementById("pubsdiv");
//alert(vPubsDiv.innerHTML);
document.getElementById("pubsright").innerHTML=vPubsDiv.innerHTML ;
}
}

Here's the content of pubsdiv:
<div id="pubsdiv" class="related">
<li>
<a href="/index.php?option=com_content&amp;task=view&amp;id=573&amp;Itemid=214"> Publications</a></li>
</div>

I added the alert to see what's happening, and it produces a popup:
<LI><A href="http:// someplace/index.php?option=com_content&amp;task=view&amp;id=573&amp;Itemid=214"> Publications</A></LI>

can somebody please explain what the second .innerHTML does in
=vPubsDiv.innerHTML;

Any other suggestions on this? Thanks in advance

[daveVk]

<li> tags are intended for use within ordered or unordered lists that is <ol> or <ul> tags.

Check if your page validates, you may need to add <ul> tags or replace <li> with something else.

The second .innerHTML in vPubsDiv.innerHTML simply produces the text string you see in the alert.

[poppyrich]

Try assigning the innerHTML of vPubsDiv to a variable first:

if (document.getElementById("pubsdiv")) {
if (document.getElementById("pubsright")) {
vPubsDiv = document.getElementById("pubsdiv");
var vPubsDivInner=vPubsDiv.innerHTML;
//alert(vPubsDiv.innerHTML);
// document.getElementById("pubsright").innerHTML=vPubsDiv.innerHTML ;
document.getElementById("pubsright").innerHTML=vPubsDivInner;
}
}

[justins]

The second ".innerHTML" that I don't understand is the one on the right-hand side of the equal operator:
document.getElementById("pubsright").innerHTML=vPubsDiv.innerHTML;

This javascript spits out the <LI><A ... string into other browser code and is surrounded by <UL> tags. And it works fine in non-IE browsers.

I tried poppyrich's suggestion but IE does the same.

Hmmmm.... validation.... this CMS is probably never going to validate, but i'll look for errors nearby this code.

[poppyrich]

I put together a quick test page and couldn't reproduce your problem.
My suspicion is the nesting of the tags might, might be causing a problem.
Where and how is the UL tag closed in all this?
Your example has an LI tag floating in the middle of a div. What else is going on?

[justins]

Omagosh, you're right! This is what firebug gives me -- I guess I didn't notice because I had fudged the nested UL levels to look like the same list:

<ul class="news">
<li>
</li>
<div id="otherpubsright" style="margin: 6px 0pt 0pt; padding: 0pt; font-weight: bold;">
<li>
<a href="http://loco:3032/index.php?option=com_content&task=view&id=573&Itemid=214">Other Publications</a>
</li>
</div>
</ul>

As soon as I added the <ul> and </ul> around the code getting inserted IE bacame happy as a clam.

Thank you both for pointing that out, PoppyRick and DaveVk! (I had been looking at this for so long... ) It really is amazing how lenient FFand other browsers are.

Cheers! and thanks again! :)