What obvious thing am I missing?

  • Thread starter The Natural Philosopher
  • Start date
T

The Natural Philosopher

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?
 
R

rf

The Natural Philosopher said:
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";
Click to expand...

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

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

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

Evertjan.

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.
Click to expand...

Works fine overhere in IE7, FF3, chrome1 and Opera9.6
Is it down to me using HTML4.0 strict?
Click to expand...

Do you [use]?
 
T

The Natural Philosopher

Conrad said:
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.
Click to expand...
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
 
R

rf

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.
Click to expand...

Yes, it does. Both of them do.

URL proving your assertion?
 
T

The Natural Philosopher

Conrad said:
No, that can't be the reason. Did you validate your markup?
Click to expand...
yes. HTML 4.0 clean by w3c.org
Which
rendering mode is used?
Click to expand...

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 said:
Other than that I have to agree with rf, show us a reduced example
(preferably) or a link to the page with the problem.
Click to expand...

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>
 
T

The Natural Philosopher

rf said:
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 :-(


Yes, it does. Both of them do.

URL proving your assertion?
Click to expand...

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.;-)
 
R

rf

The Natural Philosopher said:
Sorry cant do that.
Click to expand...

Then you are on your own.
But I can assure you they did not..
Click to expand...

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,
Click to expand...

Yes. There is something different. Mine works, yours does not.
since unlike you, I trust what you say.;-)
Click to expand...

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?
 
R

rf

<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>
Click to expand...

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

rf

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".
Click to expand...

Nor will it change the contents of the b elements nextSibling, the text
element containing 7.07...
 
H

Henry

Conrad Lender wrote:

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">
Click to expand...

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?
Click to expand...

Which div?
A <B>blah</b>..is that a problem?
Click to expand...

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.
That latter is hard.
Click to expand...

But the former could be as effective, if done.

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.
Click to expand...

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
Click to expand...
<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..
Click to expand...

At least some of the mark-up generated.

<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>
Click to expand...
<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.
 
L

Logos

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

yes. HTML 4.0 clean by w3c.org
Which
rendering mode is used?
Click to expand...

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 said:
Other than that I have to agree with rf, show us a reduced example
(preferably) or a link to the page with the problem.
Click to expand...

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
Click to expand...
Click to expand...

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
 
T

The Natural Philosopher

rf said:
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?
Click to expand...

No. That's why I am asking.
 
L

Logos

No. That's why I am asking.
Click to expand...

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!).
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
I am trying to detect Which image id="" was clicked ? 22
I am trying to make an audio player, how do I get the selected file to be playable? 5
What "might" I be doing wrong with this snippet? 6
How can I hide a div using an event listener on multiple checkboxes? 6
Only one table shows up with the information 2
I want to learn More Advanced Javascript for Game Development, but can't seem to be able to progress in my coding ability 0
Help with Python Flask on PI as server SSE to website 0

Members online

No members online now.
Total: 158 (members: 0, guests: 158)
Robots: 334

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top