What obvious thing am I missing?

Discussion in 'Javascript' started by The Natural Philosopher, Jan 4, 2009.

  1. consider
    <div id="rubbish">Rubbish</div>

    And:

    document.getElementById('rubbish').innerHTML="Gold dust";

    So far, it works.

    However..

    document.getElementById('rubbish').firstChild.data="Gold dust";

    does not.

    No errors on Firefox.Just doesn't update the screen.

    Is it down to me using HTML4.0 strict?
    The Natural Philosopher, Jan 4, 2009
    #1
    1. Advertising

  2. The Natural Philosopher

    rf Guest

    "The Natural Philosopher" <> wrote in message
    news:...
    >
    > consider
    > <div id="rubbish">Rubbish</div>
    >
    > And:
    >
    > document.getElementById('rubbish').innerHTML="Gold dust";
    >
    > So far, it works.
    >
    > However..
    >
    > document.getElementById('rubbish').firstChild.data="Gold dust";


    document.getElementById('rubbish').firstChild.nodeValue="Gold dust";


    > No errors on Firefox.Just doesn't update the screen.


    Nope. There would not be. You have merely added a ['data'] property to that
    text node. Quite allowable but data is not the property that is displayed.

    > Is it down to me using HTML4.0 strict?
    >
    rf, Jan 4, 2009
    #2
    1. Advertising

  3. The Natural Philosopher

    Evertjan. Guest

    The Natural Philosopher wrote on 05 jan 2009 in comp.lang.javascript:

    >
    > consider
    > <div id="rubbish">Rubbish</div>
    >
    > And:
    >
    > document.getElementById('rubbish').innerHTML="Gold dust";
    >
    > So far, it works.
    >
    > However..
    >
    > document.getElementById('rubbish').firstChild.data="Gold dust";
    >
    > does not.
    >
    > No errors on Firefox.Just doesn't update the screen.


    Works fine overhere in IE7, FF3, chrome1 and Opera9.6

    > Is it down to me using HTML4.0 strict?


    Do you [use]?

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Jan 4, 2009
    #3
  4. rf wrote:
    > "The Natural Philosopher" <> wrote in message
    > news:...
    >> consider
    >> <div id="rubbish">Rubbish</div>
    >>
    >> And:
    >>
    >> document.getElementById('rubbish').innerHTML="Gold dust";
    >>
    >> So far, it works.
    >>
    >> However..
    >>
    >> document.getElementById('rubbish').firstChild.data="Gold dust";

    >
    > document.getElementById('rubbish').firstChild.nodeValue="Gold dust";
    >
    >


    That didnt work either.

    >> No errors on Firefox.Just doesn't update the screen.

    >
    > Nope. There would not be. You have merely added a ['data'] property to that
    > text node. Quite allowable but data is not the property that is displayed.
    >
    >> Is it down to me using HTML4.0 strict?
    >>

    >
    >
    The Natural Philosopher, Jan 5, 2009
    #4
  5. Conrad Lender wrote:
    > On 2009-01-05 00:38, The Natural Philosopher wrote:
    >> <div id="rubbish">Rubbish</div>

    > ...
    >> document.getElementById('rubbish').innerHTML="Gold dust";

    > ...
    >> document.getElementById('rubbish').firstChild.data="Gold dust";
    >>
    >> does not.
    >>
    >> No errors on Firefox.Just doesn't update the screen.

    >
    > Are you _sure_ that the original <div> had "Rubbish" inside? Or did you
    > just have <div id="rubbish"></div> (or even <div id="rubbish"/>)? In
    > that case, IE (incorrectly) won't see a firstChild element.
    >

    Oh yes. It actually got a money value and a percentage in it.

    It updates fine with innerHTML. but the 'firstchild.blah' stuff all
    doesn't work.

    Wondering if thats beacse I am using HTML markup, not XML, or something
    The Natural Philosopher, Jan 5, 2009
    #5
  6. The Natural Philosopher

    rf Guest

    "The Natural Philosopher" <> wrote in message
    news:...
    > rf wrote:
    >> "The Natural Philosopher" <> wrote in message
    >> news:...
    >>> consider
    >>> <div id="rubbish">Rubbish</div>
    >>>
    >>> And:
    >>>
    >>> document.getElementById('rubbish').innerHTML="Gold dust";
    >>>
    >>> So far, it works.
    >>>
    >>> However..
    >>>
    >>> document.getElementById('rubbish').firstChild.data="Gold dust";

    >>
    >> document.getElementById('rubbish').firstChild.nodeValue="Gold dust";



    This reply of mine was, as Conrad helpfully pointed out, completely
    erreonious. I've no idea what I was thinking about at the time, obviously
    nothing to do with Javascript :-(

    > That didnt work either.


    Yes, it does. Both of them do.

    URL proving your assertion?
    rf, Jan 5, 2009
    #6
  7. Conrad Lender wrote:
    > On 2009-01-05 10:15, The Natural Philosopher wrote:
    >> Conrad Lender wrote:
    >>> Are you _sure_ that the original <div> had "Rubbish" inside? Or did you
    >>> just have <div id="rubbish"></div> (or even <div id="rubbish"/>)? In
    >>> that case, IE (incorrectly) won't see a firstChild element.
    >>>

    >> Oh yes. It actually got a money value and a percentage in it.
    >>
    >> It updates fine with innerHTML. but the 'firstchild.blah' stuff all
    >> doesn't work.
    >>
    >> Wondering if thats beacse I am using HTML markup, not XML, or something

    >
    > No, that can't be the reason. Did you validate your markup?

    yes. HTML 4.0 clean by w3c.org

    > Which
    > rendering mode is used?


    Not sure i understand: Is it this?

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">


    Does the div contain anything else besides text?
    A <B>blah</b>..is that a problem?

    > Other than that I have to agree with rf, show us a reduced example
    > (preferably) or a link to the page with the problem.


    That latter is hard.
    Its a database giving access to commercial info, behind a firewall..


    The function tht does the change is this

    function do_discount()
    {
    var grand_total=document.getElementsByName('grand_total')[0].value;
    var order_cost=document.getElementsByName('order_cost')[0].value;
    var order_total=document.getElementsByName('order_total')[0].value;
    var discount=order_total-grand_total;
    document.getElementsByName('discount')[0].value=Math.round(discount*100);
    document.getElementsByName('update')[0].value='yes';
    var margin=Math.round((grand_total-order_cost)*100)/100;
    var margin_string="<b>Margin: </b>"+margin+" :
    "+Math.round(margin*100/grand_total)+ "%";

    document.getElementById('sales_margin').innerHTML=margin_string;
    }

    That works. There are hidden input fields covering the various
    getelementsbyname stuff.


    The target div is this in php

    <div style="position: absolute; left: 5px; top: -3px; text-align:
    right"><INPUT onchange="do_discount()" style="width: 90px;" type="TEXT"
    maxlength="31" size="10" name="grand_total" value ="<? echo
    $grand_total; ?>"></div>
    <div id="sales_margin" style="font-weight: normal; position: absolute;
    top: 0px;left: 110px;width: 140px; text-align: left;"><b>Margin:</b><?
    printf (" %0.02f: %3.0f%%",$margin, $margin*100/$grand_total);?> </div>

    Here is an actual source of it in use..

    <div style="position: absolute; top: 8px;left: 750px;width: 100px;
    text-align: right;">
    <div style="position: absolute; left: 5px; top: -3px; text-align: right">
    <INPUT onchange="do_discount()" style="width: 90px;" type="TEXT"
    maxlength="31" size="10" name="grand_total" value ="22.9">
    </div>
    <div id="sales_margin" style="font-weight: normal; position: absolute;
    top: 0px;left: 110px;width: 140px; text-align: left;"><b>Margin:</b>
    7.07: 31% </div>
    </div>


    >
    >
    > - Conrad
    The Natural Philosopher, Jan 6, 2009
    #7
  8. rf wrote:
    > "The Natural Philosopher" <> wrote in message
    > news:...
    >> rf wrote:
    >>> "The Natural Philosopher" <> wrote in message
    >>> news:...
    >>>> consider
    >>>> <div id="rubbish">Rubbish</div>
    >>>>
    >>>> And:
    >>>>
    >>>> document.getElementById('rubbish').innerHTML="Gold dust";
    >>>>
    >>>> So far, it works.
    >>>>
    >>>> However..
    >>>>
    >>>> document.getElementById('rubbish').firstChild.data="Gold dust";
    >>> document.getElementById('rubbish').firstChild.nodeValue="Gold dust";

    >
    >
    > This reply of mine was, as Conrad helpfully pointed out, completely
    > erreonious. I've no idea what I was thinking about at the time, obviously
    > nothing to do with Javascript :-(
    >
    >> That didnt work either.

    >
    > Yes, it does. Both of them do.
    >
    > URL proving your assertion?
    >


    Sorry cant do that.

    But I can assure you they did not..

    Which means something about your setup and mine is different, since
    unlike you, I trust what you say.;-)



    >
    >
    The Natural Philosopher, Jan 6, 2009
    #8
  9. The Natural Philosopher

    rf Guest

    "The Natural Philosopher" <> wrote in message
    news:...
    > rf wrote:
    >> "The Natural Philosopher" <> wrote in message
    >> news:...
    >>> rf wrote:
    >>>> "The Natural Philosopher" <> wrote in message
    >>>> news:...
    >>>>> consider
    >>>>> <div id="rubbish">Rubbish</div>
    >>>>>
    >>>>> And:
    >>>>>
    >>>>> document.getElementById('rubbish').innerHTML="Gold dust";
    >>>>>
    >>>>> So far, it works.
    >>>>>
    >>>>> However..
    >>>>>
    >>>>> document.getElementById('rubbish').firstChild.data="Gold dust";
    >>>> document.getElementById('rubbish').firstChild.nodeValue="Gold dust";

    >>
    >>
    >> This reply of mine was, as Conrad helpfully pointed out, completely
    >> erreonious. I've no idea what I was thinking about at the time, obviously
    >> nothing to do with Javascript :-(
    >>
    >>> That didnt work either.

    >>
    >> Yes, it does. Both of them do.
    >>
    >> URL proving your assertion?
    >>

    >
    > Sorry cant do that.


    Then you are on your own.

    > But I can assure you they did not..


    What can be so complex about this? I built up a test page with exactly what
    you have revealed so for, a div with some content and a button whose onclick
    listener does stuff. That stuff is what is mentioned above and *it works*.
    If yours does not then you either have other errors or the first child of
    that div is *not* a text element containing the word "rubbish".

    Indulge in some level 101 debugging. Alert a few things.
    Alert(document.getElementById('rubbish').firstChild.data) and see what you
    get.

    > Which means something about your setup and mine is different,


    Yes. There is something different. Mine works, yours does not.

    > since unlike you, I trust what you say.;-)


    I beg your pardon?

    However I just saw your post to Conrad. You really don't know what you are
    doing at all with this DOM stuff, do you?
    rf, Jan 6, 2009
    #9
  10. The Natural Philosopher

    rf Guest

    "The Natural Philosopher" <> wrote in message
    news:...

    > <div id="sales_margin" style="font-weight: normal; position: absolute;
    > top: 0px;left: 110px;width: 140px; text-align: left;"><b>Margin:</b> 7.07:
    > 31% </div>


    If you had provided this information up front your problem would have been
    solved instantly.

    Just what do you think the first child of your "sales_margin" div is? It's a
    bloody b element. That b element has, as *it's* first child, a text element,
    with a nodeValue of "Margin".

    As I implied earlier on, you can assign a data property (or a nodeValue one
    for that matter) as many times as you like to that b element (being the
    first child of the div) but it will not cause any change to the b elements
    child, the text element containing "Margin".

    document.getElementById('rubbish').firstChild.firstChild.data="Gold dust";

    Duh.
    rf, Jan 6, 2009
    #10
  11. The Natural Philosopher

    rf Guest

    "rf" <> wrote in message
    news:lJH8l.8325$...
    >
    > "The Natural Philosopher" <> wrote in message
    > news:...
    >
    >> <div id="sales_margin" style="font-weight: normal; position: absolute;
    >> top: 0px;left: 110px;width: 140px; text-align: left;"><b>Margin:</b>
    >> 7.07: 31% </div>


    > As I implied earlier on, you can assign a data property (or a nodeValue
    > one for that matter) as many times as you like to that b element (being
    > the first child of the div) but it will not cause any change to the b
    > elements child, the text element containing "Margin".


    Nor will it change the contents of the b elements nextSibling, the text
    element containing 7.07...
    rf, Jan 6, 2009
    #11
  12. The Natural Philosopher

    Henry Guest

    On Jan 6, 11:38 am, The Natural Philosopher wrote:
    > Conrad Lender wrote:

    <snip>
    >> Which
    >> rendering mode is used?

    >
    > Not sure i understand: Is it this?
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    > "http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">


    Rendering mode is irrelevant here, but the above is a significant
    factor in determining which mode gets used. In this case probably
    'strict' mode (the DOCTYPE declaration needs to be seen in context for
    a certain determination of the mode that will be used).

    > Does the div contain anything else besides text?


    Which div?

    > A <B>blah</b>..is that a problem?


    Is this the content of the DIV which you are trying to treat as a text
    Node? As it is the mark up for an Element treating it as a text node
    will not be effective.

    >> Other than that I have to agree with rf, show us a reduced
    >> example (preferably) or a link to the page with the problem.

    >
    > That latter is hard.


    But the former could be as effective, if done.

    <snip>
    > The function tht does the change is this
    >
    > function do_discount()
    > {
    > var grand_total=document.getElementsByName('grand_total')[0].value;
    > var order_cost=document.getElementsByName('order_cost')[0].value;
    > var order_total=document.getElementsByName('order_total')[0].value;
    > var discount=order_total-grand_total;
    > document.getElementsByName('discount')[0].value=
    > Math.round(discount*100);
    > document.getElementsByName('update')[0].value='yes';
    > var margin=Math.round((grand_total-order_cost)*100)/100;
    > var margin_string="<b>Margin: </b>"+margin+" :
    > "+Math.round(margin*100/grand_total)+ "%";
    >
    > document.getElementById('sales_margin').innerHTML=margin_string;
    > }
    >
    > That works.


    So when asked to post a reduced example that demonstrates the issue
    you post the code that does *not* demonstrate the issue. In the long
    run there will only be one outcome of not cooperating with the people
    who try to help you.

    > There are hidden input fields covering the various
    > getelementsbyname stuff.
    >
    > The target div is this in php

    <snip>

    PHP source code is of very limited value in this context (even for the
    people here who actually know PHP). Issues with the interaction of
    client side code and (x?)HTML DOMs are best approached with knowledge
    of the actual mark-up received by the browser, not the code that
    generates the mark-up. Neither the browser nor the javascript it
    executes are aware of how any mark-up may have come into existence, so
    the mechanism of its creation is of little relevance.

    > Here is an actual source of it in use..


    At least some of the mark-up generated.

    <snip>
    > <div id="sales_margin" style="font-weight: normal; position:
    > absolute; top: 0px;left: 110px;width: 140px;
    > text-align: left;"><b>Margin:</b> 7.07: 31% </div>

    <snip>

    Your original post says:-

    | document.getElementById('rubbish').innerHTML="Gold dust";
    |
    | So far, it works.
    |
    | However..
    |
    | document.getElementById('rubbish').firstChild.data="Gold dust";
    |
    | does not.

    - so it is presumably the final line in the function that is the one
    that would be swapped for the code that includes the assignment to -
    firstChild.data -. and so it is the DIV with the ID "sales_margin"
    who's firstChild is to be modified. (this could have been quickly and
    simply shown (even in the first post) rather than needing working
    out))

    Clearly the firstChild of the DIV with the ID "sales_margin" is a B
    element, and so assigning to a - data - (or even a - nodeValue -)
    property of that element would not be expected to have any
    consequences for displayed content of the DIV. Only text nodes are
    expected to respond to such assignments.
    Henry, Jan 6, 2009
    #12
  13. The Natural Philosopher

    Logos Guest

    On Jan 6, 4:38 am, The Natural Philosopher <> wrote:
    > Conrad Lender wrote:
    > > On 2009-01-05 10:15, The Natural Philosopher wrote:
    > >> Conrad Lender wrote:
    > >>> Are you _sure_ that the original <div> had "Rubbish" inside? Or did you
    > >>> just have <div id="rubbish"></div> (or even <div id="rubbish"/>)?In
    > >>> that case, IE (incorrectly) won't see a firstChild element.

    >
    > >> Oh yes. It actually got a money value and a percentage in it.

    >
    > >> It updates fine with innerHTML. but the 'firstchild.blah' stuff all
    > >> doesn't work.

    >
    > >> Wondering if thats beacse I am using HTML markup, not XML, or something

    >
    > > No, that can't be the reason. Did you validate your markup?

    >
    > yes. HTML 4.0 clean by w3c.org
    >
    > > Which
    > > rendering mode is used?

    >
    > Not sure i understand: Is it this?
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    >          "http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
    >
    > Does the div contain anything else besides text?
    > A <B>blah</b>..is that a problem?
    >
    > > Other than that I have to agree with rf, show us a reduced example
    > > (preferably) or a link to the page with the problem.

    >
    > That latter is hard.
    > Its a database giving access to commercial info, behind a firewall..
    >
    > The function tht does the change is this
    >
    > function do_discount()
    >         {
    >         var grand_total=document.getElementsByName('grand_total')[0].value;
    >         var order_cost=document.getElementsByName('order_cost')[0].value;
    >         var order_total=document.getElementsByName('order_total')[0].value;
    >         var discount=order_total-grand_total;
    >         document.getElementsByName('discount')[0].value=Math.round(discount*100);
    >         document.getElementsByName('update')[0].value='yes';
    >         var margin=Math.round((grand_total-order_cost)*100)/100;
    >         var margin_string="<b>Margin: </b>"+margin+" :
    > "+Math.round(margin*100/grand_total)+ "%";
    >
    >         document.getElementById('sales_margin').innerHTML=margin_string;
    >         }
    >
    > That works. There are hidden input fields covering the various
    > getelementsbyname stuff.
    >
    > The target div is this in php
    >
    > <div style="position: absolute; left: 5px; top: -3px; text-align:
    > right"><INPUT onchange="do_discount()" style="width: 90px;" type="TEXT"
    > maxlength="31" size="10" name="grand_total" value ="<? echo
    > $grand_total; ?>"></div>
    >                 <div id="sales_margin" style="font-weight: normal; position: absolute;
    > top: 0px;left: 110px;width: 140px; text-align: left;"><b>Margin:</b><?
    > printf (" %0.02f: %3.0f%%",$margin, $margin*100/$grand_total);?> </div>
    >
    > Here is an actual source of it in use..
    >
    > <div style="position: absolute; top: 8px;left: 750px;width: 100px;
    > text-align: right;">            
    > <div style="position: absolute; left: 5px; top: -3px; text-align: right">
    > <INPUT onchange="do_discount()" style="width: 90px;" type="TEXT"
    > maxlength="31" size="10" name="grand_total" value ="22.9">
    > </div>
    > <div id="sales_margin" style="font-weight: normal; position: absolute;
    > top: 0px;left: 110px;width: 140px; text-align: left;"><b>Margin:</b>
    > 7.07:  31% </div>
    > </div>
    >
    >
    >
    > >   - Conrad

    >
    >


    Hey man! Just some advice to save you some headache (and public
    ridicule!) the next time: use FF+Firebug or IE+Developer Toolbar and
    explore your page DOMs so you have a better idea of how things are
    structured. FF+Firebug has a lot more features, so try it out unless
    you're writing to IE specs only.

    Tyler Style
    http://malthusian-solutions.com
    http://nirdvana.com
    Logos, Jan 6, 2009
    #13
  14. rf wrote:
    > "The Natural Philosopher" <> wrote in message
    >
    > However I just saw your post to Conrad. You really don't know what you are
    > doing at all with this DOM stuff, do you?
    >


    No. That's why I am asking.

    >
    The Natural Philosopher, Jan 6, 2009
    #14
  15. The Natural Philosopher

    Logos Guest

    On Jan 6, 3:40 pm, The Natural Philosopher <> wrote:
    > rf wrote:
    > > "The Natural Philosopher" <> wrote in message

    >
    > > However I just saw your post to Conrad. You really don't know what you are
    > > doing at all with this DOM stuff, do you?

    >
    > No. That's why I am asking.
    >


    Another word to the wise: asking questions on a newsgroup is a great
    way to learn! But it's always good to state your level of expertise
    so that people can pitch their posts to the correct level. (ie), if
    you say you are a newb to some concept, you'll get a lot more
    questions about basic set up stuff and a LOT more tolerance than if
    you say you're familiar or expert (or don't say anything at all!).

    --
    Tyler Style
    http://malthusian-solutions.com
    http://nirdvana.com
    Logos, Jan 7, 2009
    #15
    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. Steven D'Aprano
    Replies:
    2
    Views:
    360
    Dan Christensen
    Feb 20, 2006
  2. SimeonArgus

    Missing the obvious...

    SimeonArgus, Mar 16, 2007, in forum: ASP .Net
    Replies:
    5
    Views:
    357
    =?ISO-8859-1?Q?G=F6ran_Andersson?=
    Mar 18, 2007
  3. Wayne  Wengert

    Missing Something Obvious Here!

    Wayne Wengert, Aug 30, 2003, in forum: ASP General
    Replies:
    0
    Views:
    95
    Wayne Wengert
    Aug 30, 2003
  4. Michael Judge
    Replies:
    2
    Views:
    100
    Michael Judge
    Feb 5, 2006
  5. Ray Cote
    Replies:
    0
    Views:
    115
    Ray Cote
    Jan 3, 2013
Loading...

Share This Page