problem clearing innerhtml on mozilla

Discussion in 'Javascript' started by ed, Dec 1, 2005.

  1. ed

    ed Guest

    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.
     
    ed, Dec 1, 2005
    #1
    1. Advertising

  2. ed

    RobG Guest

    ed wrote:
    > 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.




    --
    Rob
     
    RobG, Dec 2, 2005
    #2
    1. Advertising

  3. ed

    ed Guest

    RobG wrote:
    > ed wrote:
    > > 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.


    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!

    <snip>
    > > 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.


    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!
     
    ed, Dec 2, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fly Cooter

    Re: Clearing floaters in Mozilla

    Fly Cooter, Aug 20, 2005, in forum: HTML
    Replies:
    4
    Views:
    371
    Shawn K. Quinn
    Aug 20, 2005
  2. Mitch

    Mozilla, innerHTML question.

    Mitch, Sep 17, 2003, in forum: Javascript
    Replies:
    4
    Views:
    116
    Dr John Stockton
    Sep 17, 2003
  3. Ted Weatherly

    Escaping quotes for innerHTML in Mozilla

    Ted Weatherly, Mar 3, 2004, in forum: Javascript
    Replies:
    1
    Views:
    145
    Gary Mayor
    Mar 3, 2004
  4. Robert Oschler
    Replies:
    2
    Views:
    300
    cosmic foo
    Jul 29, 2005
  5. sonic
    Replies:
    5
    Views:
    293
    Randy Webb
    Jul 11, 2006
Loading...

Share This Page