innerHTML IE bug?

[lejason]

Im by no means an expert on Javascript so I could be missing something
completely obvious here but I am having a problem. I want to make a
button that users can click and when they click it, I want new menu
items to apear. So, I was going to use innerHTML - right?

Well, I did this little test and it worked fine in FF and Opera...but
no IE7?!? So I am wondering what I am missing. here is the code


(in the head)


function addmenu() {
document.getElementById("test").innerHTML = "<p>PLEASE WORK!!!!</p>";
}

--------

(later in the body - text should apear in the span)

<span id="test"> </span>
<a href="#" onclick="javascript:addmenu()">Add Another Menu</a>

 

[RobG]

Im by no means an expert on Javascript so I could be missing something
completely obvious here but I am having a problem. I want to make a
button that users can click and when they click it, I want new menu
items to apear. So, I was going to use innerHTML - right?

Not necessarily, there are many ways to achieve that. I don't have
IE7 so I can't do any testing, I'll offer some advice anyway.

Well, I did this little test and it worked fine in FF and Opera...but
no IE7?!? So I am wondering what I am missing. here is the code

(in the head)

function addmenu() {
document.getElementById("test").innerHTML = "<p>PLEASE WORK!!!!</p>";

Inserting block element into an inline element creates invalid HTML,
results my be different to what you expect. Since this is just a
test, remove the P tags:

document.getElementById("test").innerHTML = "PLEASE WORK!!!!";

}

--------

(later in the body - text should apear in the span)

<span id="test"> </span>
<a href="#" onclick="javascript:addmenu()">Add Another Menu</a>

Don't use 'javascript:' in an event handler. It is usual to have the
href go somewhere useful for those with scripting disabled:

<a href="http://..."
onclick="addmenu();return false;">Add Another Menu</a>

 

[lejason]

<URL:http://jibbering.com/faq/index.html#FAQ4_24>

<a href="nowhere.html" onclick="addmenu();return false">Add Another
Menu</a>

Even better:
<a href="index.php?AddMenu" onclick="return addmenu();">Add Another
Menu</a>

Have your server page read the query string and return a page with a
menu item added. And then have your function return false.

Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/
bestpractices/

---------------------------------------

Hey Randy, first off - thanks for the help. I tried that (changing
the way my link called the function) and now, while its true that the
errors go away...it still doesnt work in IE. Still works in Fox and
Opera...just not IE. So...what next?

IF its any sort of help - I put an Alert in the same function (just to
see if IE was even calling the function at all) and as long as the
alert is first, it gives an alert however , if the alert is after the
innerHTML then it doesnt work -- in other words, its breaking (only
for IE7) on the innerHTML.

 

[ASM]

En réponse à (e-mail address removed) qui nous a susurré, en date du :
22/07/07 22:48, le message sibyllin suivant :

function addmenu() {
document.getElementById("test").innerHTML = "<p>PLEASE WORK!!!!</p>";
}

non sens !
you can't put a P in a SPAN !

<span id="test"> </span>
<a href="#" onclick="javascript:addmenu()">Add Another Menu</a>

try escaping the slash in tag of end

function addmenu() {
document.getElementById("test").innerHTML="<u>PLEASE WORK!!!!<\/u>";
}

 

[lejason]

En réponse à (e-mail address removed) qui nous a susurré, en date du :
22/07/07 22:48, le message sibyllin suivant :




non sens !
you can't put a P in a SPAN !


try escaping the slash in tag of end

function addmenu() {
document.getElementById("test").innerHTML="<u>PLEASE WORK!!!!<\/u>";

}

haha - im retarded. That was exactly the problem.

So, to clear this all up for anyone else who has the same problem and
is readin this post for answers...here is the run down.

First, I needed to call the function without using
"javascript:addmenu()" and instead use onclick="addmenue(); return
false">. The article randy mentioned explains this.

Secondly, its true, the issue was that I was trying to put a <p>
inside of a span...but you cant do that as Stephane Moriaux pointed
out. So instead, I made the span a <div> and it worked great.

Thank you all so much for you help!

 

[ASM]

En réponse à Randy Webb qui nous a susurré, en date du : 23/07/07 0:23,
le message sibyllin suivant :

ASM said the following on 7/22/2007 5:30 PM: (...)
It made no difference as the code I tested was an exact copy/paste of
what was posted and IE7 *happily* added the text/elements for me.

Unlovely I can't juge : I haven't IE nor Windows

It seems strange that this stupid IE could decide to follow w3c still to
forbid html insertions by JS. But ... who know ?

What lejason made wrong in his file ?
or
What in his IE was wrong ?

 

[atollo]

Im by no means an expert on Javascript so I could be missing something
completely obvious here but I am having a problem. I want to make a
button that users can click and when they click it, I want new menu
items to apear. So, I was going to use innerHTML - right?

Well, I did this little test and it worked fine in FF and Opera...but
no IE7?!? So I am wondering what I am missing. here is the code

(in the head)

function addmenu() {
document.getElementById("test").innerHTML = "<p>PLEASE WORK!!!!</p>";

}

--------

(later in the body - text should apear in the span)

<span id="test"> </span>
<a href="#" onclick="javascript:addmenu()">Add Another Menu</a>

hi,
i'm facing with the same problem. In FF it works perfectly. In IE I
have no error but dynamic texts appear while dynamic images remain
blank!!

can someone help me?

tnx
mike

 

[kai]

haha - im retarded. That was exactly the problem.

So, to clear this all up for anyone else who has the same problem and
is readin this post for answers...here is the run down.

First, I needed to call the function without using
"javascript:addmenu()" and instead use onclick="addmenue(); return
false">. The article randy mentioned explains this.

Secondly, its true, the issue was that I was trying to put a <p>
inside of a span...but you cant do that as Stephane Moriaux pointed
out. So instead, I made the span a <div> and it worked great.

Thank you all so much for you help!

You can use <span style="display:block;"> and then insert block
elements into it. Not the best solution but <div> forces a line break
so its one way to avoid that if necessary

 

[Thomas 'PointedEars' Lahn]

ASM said the following on 7/22/2007 5:30 PM:

Then why did IE7 do it for me? And, why does FF and Opera not balk on
the code (It doesn't on a PC). Please don't tell me IE was doing
something right and FF/Opera were doing it wrong

Just in case my irony detector is not broken: because the `innerHTML'
feature does not include any kind of validation. Which is one of its
major flaws and the reason it is not defined in the W3C DOM.


PointedEars

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn said the following on 8/1/2007 9:09 AM:

It didn't work in IE7 for the OP but it works for me in IE7.

Given the number of patches released for Windows XP since the IE 7
release, and the general impossibility to judge closed source
applications by its code quality, that is a possibility.

No irony with regards to innerHTML there unless IE was doing something
right and FF/Opera were doing it wrong.

Again your logic is flawed (aren't you getting tired of reading that?).
Because something works does not mean that this is correct behavior.

However, what is considered correct behavior appears to be subject to
interpretation. In this case, IMHO it would be correct behavior if it
did not work, because the markup created from the resulting DOM tree
would be not Valid anymore. Yet it could be that a vendor decided to
allow the attempt of creating such invalid markup with `innerHTML'
because they consider their error-correction process to be sophisticated
enough to handle that.


PointedEars