problem clearing innerhtml on mozilla

[ed]

Hello-

i'm having some problems getting innerhtml to clear on mozilla, but it
works fine in ie. my page is setup such that i have a div:

<div id="otherModel"></div>

on a select from a combo box, in my javascript i execute:
div = document.getElementById("otherModel");
depending on what's selected in a combobox, i execute:
var inner2 = "<p>Other Model:<br />";
inner2 = inner2 + "<input type='text' id='otherModel' ";
inner2 = inner2 + "size='20' maxlength='30' value='Enter Model'>";
div.innerHTML = inner2;
or simply:
div.innerHTML = "test";

This all works fine independantly; it'll either fill with my textbox,
or the test string. but if the innerhtml is filled with the text box,
then i make a new selection that fills it with "test", it doesn't clear
out the text box.

If i replace the variable inner2 with simple text, everything seems to
work great (but i need a text box!). any insight would be
appreciated...

an example can be seen here:
http://www.atwistedweb.com/blog/index.php?/categories/35-Helmet-Survey.

 

[RobG]

Hello-

i'm having some problems getting innerhtml to clear on mozilla, but it
works fine in ie. my page is setup such that i have a div:

<div id="otherModel"></div>

on a select from a combo box, in my javascript i execute:
div = document.getElementById("otherModel");
depending on what's selected in a combobox, i execute:
var inner2 = "<p>Other Model:<br />";
inner2 = inner2 + "<input type='text' id='otherModel' ";

Here you create a second element with the id 'otherModel', that gives
you invalid HTML.

inner2 = inner2 + "size='20' maxlength='30' value='Enter Model'>";
div.innerHTML = inner2;

A more efficient way of concatenating the text is:

var inner2 = "<p>Other Model:<br>"
+ "<input type='text' id='otherModel' "
+ "size='20' maxlength='30' value='Enter Model'>";

or simply:
div.innerHTML = "test";

You should implement this as something like:

var inner2 ='test';
if ( someTest ){
inner2 = "<p>Other Model:<br>"
+ "<input type='text' id='otherModel_02' "
+ "size='20' maxlength='30' value='Enter Model'>";
}
div.innerHTML = inner2;


In other words, set inner2 to some value and then change it if your
logic says to do so - and don't duplicate the ID.

This all works fine independantly; it'll either fill with my textbox,
or the test string. but if the innerhtml is filled with the text box,
then i make a new selection that fills it with "test", it doesn't clear
out the text box.

Probably because of the duplicated ID attribute.

If i replace the variable inner2 with simple text, everything seems to
work great (but i need a text box!). any insight would be
appreciated...

Presumably replacing the HTML with simple text removed the duplicate ID.

an example can be seen here:
http://www.atwistedweb.com/blog/index.php?/categories/35-Helmet-Survey.

I looked, but it's messy. I think the above advice will do the trick.

 

[ed]

Here you create a second element with the id 'otherModel', that gives
you invalid HTML.

that's it, that's rob! i'd been looking at the stooopid code all day
and it'd figure i'd miss something dumb like that!

I looked, but it's messy. I think the above advice will do the trick.

yeah, it's all being dumped into the middle of a blog, so that doesn't
help... thanks for the hints though- it did the trick!