Very simple question from a novice

Knut Olsen-Solberg · May 5, 2006

I try to change the text in a <p> using getElementById(). I wonder what properties exists, and which one to use here. (The following does not work.)

Regards Knut

______________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<SCRIPT language="javascript">
function swap() {
document.getElementById('para1').value="New text";
}
</SCRIPT>
</HEAD>

<BODY>
<p id="para1">This is first line</p>
<p id="para2">Here is second line</p>
<FORM action="" method="post">
<INPUT type="button" value="Swap" onClick="swap()">
</FORM>
</BODY>
</HTML>
______________________

Randy Webb · May 5, 2006

Knut Olsen-Solberg said the following on 5/5/2006 9:39 AM:

I try to change the text in a <p> using getElementById(). I wonder what
properties exists, and which one to use here. (The following does not
work.)

That question is asked so many times it is in the Group FAQ:

How do I modify the current page in a browser?
<URL: http://jibbering.com/faq/#FAQ4_15>

ASM · May 5, 2006

Randy Webb a écrit :

How do I modify the current page in a browser?
<URL: http://jibbering.com/faq/#FAQ4_15>

I am not sure to agree with this
because iCab (and Opera ?) would understand :
DocAll = (document.all?true:false);
and they works better with DOM

Matt Kruse · May 5, 2006

ASM said:
I am not sure to agree with this

I agree, that answer in the FAQ seems quite out-dated. It doesn't even test
whether .innerHTML is supported before setting it.

I realize FAQs are difficult to maintain, but with it being posted and cited
so often here, it really should contain better answers than this. IMO.

Michael Winter · May 5, 2006

On 05/05/2006 16:21, Matt Kruse wrote:

[Randy Webb:]

[snip]

[...] that answer in the FAQ seems quite out-dated. It doesn't even
test whether .innerHTML is supported before setting it.

True, but the linked alternative version does.

It might also be worth mentioning that, when the string doesn't contain
markup, it can be much more efficient to use the data property defined
in the W3C DOM.

Mike

Randy Webb · May 5, 2006

Matt Kruse said the following on 5/5/2006 11:21 AM:

I agree, that answer in the FAQ seems quite out-dated. It doesn't even test
whether .innerHTML is supported before setting it.

Did you read that section? First line:
<quote>
At its simplest in current DOM2 (with innerHTML extension) (IE5+ NS6 )
</quote>
It doesn't test for innerHTML because it specifies that it needs the
innerHTML extension. But the browser list it specifies (IE5+ NS6) is
very outdated.

But, a test for support of innerHTML doesn't mean it actually changes
the document - visibly. Search the archives for document.chicken and you
can find those threads.

I realize FAQs are difficult to maintain, but with it being posted and cited
so often here, it really should contain better answers than this. IMO.

It links to the notes on it:

<URL: http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html >

Which is very in depth, coves testing for innerHTML (as well as it can
be tested for) and covers the problems with gEBI emulation.

Do you have a better snippet that could be used that is solid code?

Randy Webb · May 5, 2006

ASM said the following on 5/5/2006 10:54 AM:

Randy Webb a écrit :

I am not sure to agree with this
because iCab (and Opera ?) would understand :
DocAll = (document.all?true:false);

As will IE and any other browser that supports document.all, but that is
superceded a few lines later.

and they works better with DOM

DocDom = (document.getElementById?true:false);
DocAll = (document.all?true:false);
DocStr=''
if (DocAll) DocStr="return document.all[id]"

//If the browser supports document.all, then DocStr is
//defined to use document.all

if (DocDom) DocStr="return document.getElementById(id)"

//If the browser supports getElementById, then DocStr is *redefined*
//to use getElementById

So, if your browser supports gEBI, then it uses it.

Its the same as writing:

if (document.getElementById){
//use gEBI
} else if(document.all){
//use document.all
}

It only uses document.all if the browser doesn't support getElementById.

Although I think the way it is written is overly convoluted and
document.all support should be dropped entirely from that section, and
it becomes:

document.getElementById('divID').innerHTML = 'new content';

ASM · May 5, 2006

Randy Webb a écrit :

ASM said the following on 5/5/2006 10:54 AM:

As will IE and any other browser that supports document.all, but that is
superceded a few lines later.

sorry I'd read
if (DocAll) DocStr="return document.all[id]"
*else*
if (DocDom) DocStr="return document.getElementById(id)"

And I saw a lot of things intersting in this FAQ

Matt Kruse · May 5, 2006

Randy said:
It doesn't test for innerHTML because it specifies that it needs the
innerHTML extension. But the browser list it specifies (IE5+ NS6) is
very outdated.

This isn't a very "general" approach, though.

It links to the notes on it:
<URL: http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html >
Which is very in depth, coves testing for innerHTML (as well as it can
be tested for) and covers the problems with gEBI emulation.
Do you have a better snippet that could be used that is solid code?

Perhaps a condensed version of the "alt" dynwrite, with a link to the
in-depth explanation?

Randy Webb · May 5, 2006

Matt Kruse said the following on 5/5/2006 1:42 PM:

This isn't a very "general" approach, though.

Actually, I think it is more general/in-depth than it needs to be for an
FAQ Entry. The only use for the document.all code is IE4 and 1 or 2
other minimal use browsers. For an FAQ Entry, it could be nothing more than:

document.getElementById('containerID').innerHTML = newHTML;

With a link to the alt_dynwrite page.

Perhaps a condensed version of the "alt" dynwrite, with a link to the
in-depth explanation?

Condensed:

document.getElementById('containerID').innerHTML = newHTML;

Can't get any simpler

Anything you need to support that doesn't fit
that line of code is either so old or so obsolete that it is a lot more
work than should be required.

And personally, I think the alt_dynwrite page is incomplete/inaccurate.
It could cover inserting plain text only with something like:

function changeText(divId,newContent){
document.getElementById(divId).firstChild.nodeValue = newContent;
}

With necessary feature testing and resort to innerText and other methods
that are not as memory expensive as innerHTML. But, as some dude named
Jim Ley once said
<quote>
innerHTML is the most widely supported option, it works all over the
place, including PocketIE, IE4 etc. where nodeValue approaches won't,
it's simple to use and explain, and speed is rarely particularly
relevant.
</quote>
And that was back in 2003.......

VK · May 5, 2006

Randy said:
Condensed:

document.getElementById('containerID').innerHTML = newHTML;

Can't get any simpler Anything you need to support that doesn't fit
that line of code is either so old or so obsolete that it is a lot more
work than should be required.

It should be at least a short note about tables which require separate
way of content handling (except cell content where innerHTML is
applicable again). Otherwise such FAQ would encourage
myTableBody.innerHTML = "<tr><td>....</tr>";

btw what about the FAQ posting problem?
<http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/2b234f5ba2cae095>

I'm not looking for glory or cratitude of any kind

but at least it
could be *some* answer like "we changed our mind, screw you and your
program!"

Randy Webb · May 5, 2006

VK said the following on 5/5/2006 3:26 PM:

It should be at least a short note about tables which require separate
way of content handling (except cell content where innerHTML is
applicable again). Otherwise such FAQ would encourage
myTableBody.innerHTML = "<tr><td>....</tr>";

In all the questions about tables and innerHTML, how many have ever said
"I tried DynWrite but it doesn't work with tables"? None. The purpose of
the quick answer is just that - a quick general answer. And as such, the
Tables section should be elsewhere.

btw what about the FAQ posting problem?
<http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/2b234f5ba2cae095>

I'm not looking for glory or cratitude of any kind but at least it
could be *some* answer like "we changed our mind, screw you and your
program!"

They changed there minds, screw you and your program. <g>

VK · May 6, 2006

Randy said:
VK said the following on 5/5/2006 3:26 PM:

In all the questions about tables and innerHTML, how many have ever said
"I tried DynWrite but it doesn't work with tables"? None. The purpose of
the quick answer is just that - a quick general answer. And as such, the
Tables section should be elsewhere.

It should be understood that the FAQ improvement discussions have only
theoretical value: nothing will be ever changed anyway. Withing this
theoretical frame: you may be right.

They changed there minds, screw you and your program. <g>

Thanks for feedback.

Randy Webb · May 6, 2006

VK said the following on 5/6/2006 1:04 AM:

It should be understood that the FAQ improvement discussions have only
theoretical value: nothing will be ever changed anyway.

You really should consult your doctor to change your medication VK.

Withing this theoretical frame: you may be right.

It has nothing to do with "theoretical", it has to do with my belief
that I am right. And whether the FAQ ever gets changed (It inevitably
will), it won't change my belief that I am right about that.

Thanks for feedback.

As for posting the FAQ, all it would take is someone willing to
copy/paste the FAQ to a new post three times a week. I am willing to do
that until it can be automated again. Can't assure the exact time every
day but I can post it pretty close to the same time every day.

Dr John Stockton · May 6, 2006

JRS: In article <[email protected]>, dated Fri, 5 May
2006 12:29:15 remote, seen in Randy Webb

Although I think the way it is written is overly convoluted and
document.all support should be dropped entirely from that section, and
it becomes:

document.getElementById('divID').innerHTML = 'new content';

The FAQ code was, IIRC, derived from a version which attempted to
support NS4.

I half agree with you; the middle half. For the final quarter, which
you did not reach, I'd put that into a function, for brevity in use -
quicker to type, download, read, and negligibly slower to execute. For
the first quarter, see ...

Consider :

if (document.all && !document.getElementById) { // e.g. IE4
document.getElementById = function(id) { return document.all[id] } }

function Wryt(ID, Str) { document.getElementById(ID).innerHTML = Str }

with an adjacent note saying that the first is to be executed once (if
older systems are also to be supported) and that Wryt is used as
Write("SomeID", "SomeHTMLString")
where SomeID should be ... ("unique within the document and include
files and not reserved" may be stronger than needed).

However, the FAQ version has the advantage that it answers the question
without exposing an ersatz getElementById; one might have instead
something like

function Wryt(ID, Str) {
var R = document.getElementById ? document.getElementById(ID) :
document.all ? document.all[ID] : null ;
R.innerHTML = Str }
or
function Wryt(ID, Str) {
(document.getElementById ? document.getElementById(ID) :
document.all ? document.all[ID] : null).innerHTML = Str }

deeming the reduced efficiency unimportant.

ISTM that there should be, somewhere in the FAQ, an implication by
example of the general desirability of using functions for what would
otherwise be repeated code; and that would suffice.

Randy Webb · May 6, 2006

Dr John Stockton said the following on 5/6/2006 1:02 PM:

JRS: In article <[email protected]>, dated Fri, 5 May
2006 12:29:15 remote, seen in Randy Webb

The FAQ code was, IIRC, derived from a version which attempted to
support NS4.

NS4 and IE4 both were covered before it was last modified. Trying to
retain IE4 support is what lead to the current version.

I half agree with you; the middle half. For the final quarter, which
you did not reach, I'd put that into a function, for brevity in use -
quicker to type, download, read, and negligibly slower to execute. For
the first quarter, see ...
Consider :

if (document.all && !document.getElementById) { // e.g. IE4
document.getElementById = function(id) { return document.all[id] } }

If people want to support an antiquated IE4, then let them. But IE4 is
sufficiently outdated that it shouldn't be covered in the FAQ.

function Wryt(ID, Str) { document.getElementById(ID).innerHTML = Str }

I don't see the point in functionalizing gEBI there.

with an adjacent note saying that the first is to be executed once (if
older systems are also to be supported) and that Wryt is used as
Write("SomeID", "SomeHTMLString")

Assuming you mean Wryt("....."). I don't care for the name Write as it
is only a typo from write (which is seen here in c.l.j)

where SomeID should be ... ("unique within the document and include
files and not reserved" may be stronger than needed).

It probably isn't strong enough an explanation. The current notes
specify that the SomeID should be unique and goes on to explain that not
only unique to ID's but unique entirely - names and ID's.

However, the FAQ version has the advantage that it answers the question
without exposing an ersatz getElementById; one might have instead
something like

function Wryt(ID, Str) {
var R = document.getElementById ? document.getElementById(ID) :
document.all ? document.all[ID] : null ;
R.innerHTML = Str }
or
function Wryt(ID, Str) {
(document.getElementById ? document.getElementById(ID) :
document.all ? document.all[ID] : null).innerHTML = Str }

deeming the reduced efficiency unimportant.

Very true. Except with regards to document.all. If one wanted to support
IE4, then write a document.all branch as the emulation used above
doesn't cover all the differences in gEBI and the .all collection.

Dr John Stockton · May 7, 2006

JRS: In article <[email protected]>, dated
Sat, 6 May 2006 18:10:32 remote, seen in

Randy Webb said:
Dr John Stockton said the following on 5/6/2006 1:02 PM:

I don't see the point in functionalizing gEBI there.

There is no need for you to do so unassisted; and really no expectation
thereof. Assuming that there are several places in the page code where
such an innerHTML assignment must be executed, it is briefer and clearer
to encapsulate that in a function with a mnemonic name; the time taken
by the additional function call is unlikely to be significant.

Assuming you mean Wryt("....."). I don't care for the name Write as it
is only a typo from write (which is seen here in c.l.j)

Agreed, I manifestly meant Wryt; one cannot use a misspelt function.

It probably isn't strong enough an explanation. The current notes
specify that the SomeID should be unique and goes on to explain that not
only unique to ID's but unique entirely - names and ID's.

If I had meant partially unique (within the script of the document), I
would have so indicated. Even new readers probably realise that there
can be no clash, when running a page, between identifiers in javascript
and ordinary words shown by HTML.

For the present purpose, it is only necessary that the stated condition
should be sufficiently strong and not describes as absolutely necessary.

Randy Webb · May 7, 2006

Dr John Stockton said the following on 5/7/2006 10:37 AM:

JRS: In article <[email protected]>, dated
Sat, 6 May 2006 18:10:32 remote, seen in

There is no need for you to do so unassisted; and really no expectation
thereof.

Your ignorance amazes me sometimes. You are starting to act like TL with
your personal insinuations. I thought you were more intelligent than
that, I guess I was wrong.

Assuming that there are several places in the page code where
such an innerHTML assignment must be executed, it is briefer and clearer
to encapsulate that in a function with a mnemonic name; the time taken
by the additional function call is unlikely to be significant.

Do you have a function that returns a number for a string value when
that string value is a form input? Or, do you use +(fieldRef)? If you
use the + method, then by your reasoning that is incorrect and should be
encapsulated in a function if you use it in "several places". As for the
time taken, why do you use + to convert to a number instead of
Number(stringRef)? Speed.

This entire speed/clarity issue has been discussed before, in depth. I
am sure that if you do not recall it then you can find it your next trip
to the Library.

Agreed, I manifestly meant Wryt; one cannot use a misspelt function.

Aside from the misspelled word, agreed. If it were going to be a
function with a name to replace DynWrite, then name it DynWrite.

If I had meant partially unique (within the script of the document), I
would have so indicated. Even new readers probably realise that there
can be no clash, when running a page, between identifiers in javascript
and ordinary words shown by HTML.

Are you kidding? New readers would know that they can't have duplicate
ID's and/or names? I appreciate the laugh. Most of them don't even know
what +(stringRef) does (It gets asked a lot).

Knut Olsen-Solberg · May 8, 2006

Thanks!
Am I right assuming that getElementById('aID') cannot be used if aID is something in a form, e.g. an input, or an image?
I have tried, and if we have <INPUT id="ainp" type="text" size=9"> then
a=parseFloat(document.getElementById('ainp').innerHTML); does not work.
Nor does
a=parseFloat(document.getElementById('ainp').value);

I can make this work though: <INPUT name="ainp" type="text" size=9"> // name, not id
a=parseFloat(document.aform.ainp.value); // Of course the form had the name="aform".

I would highly appreciate to see these rules. I have searched for information about this for several hours, but they are either buried in an awful lot of details, or I just get small pieces of it...

Regards Knut

Dr John Stockton · May 8, 2006

JRS: In article <[email protected]>, dated
Sun, 7 May 2006 15:00:08 remote, seen in

Randy Webb said:
Dr John Stockton said the following on 5/7/2006 10:37 AM:

Your ignorance amazes me sometimes. You are starting to act like TL with
your personal insinuations. I thought you were more intelligent than
that, I guess I was wrong.

You lack the ability to judge. And being a typical Merkin, you resent
being given the treatment that you feebly apply to others.

Do you have a function that returns a number for a string value when
that string value is a form input? Or, do you use +(fieldRef)? If you
use the + method, then by your reasoning that is incorrect and should be
encapsulated in a function if you use it in "several places". As for the
time taken, why do you use + to convert to a number instead of
Number(stringRef)? Speed.

You have failed to perceive the distinction. A call to Wryt is
considerably shorter that what would otherwise be used, and less
susceptible to typos; but it's hard to see how one could code anything
more briefly than +. I referred to "such an innerHTML assignment"; you
are not justified in extending the reference in that manner. In fact,
you would be unjustified in extending it to LZ, although there a
corresponding argument is applicable. While it's not necessarily
obvious that the unary + operator is allowed, there's only two possible
meanings only one of which is reasonable.

Aside from the misspelled word, agreed. If it were going to be a
function with a name to replace DynWrite, then name it DynWrite.

It is distinct, and so should have a distinct public name. If a user
prefers to use the original name, then he can either rename the function
or assign DynWrite = Wryt .

Are you kidding? New readers would know that they can't have duplicate
ID's and/or names?

That's not what I wrote, though. If you actually read what I wrote in
the earlier quote, even you should be able to see that it was *telling*
the reader that he should not have duplicates (within the script) for
the names used as the first argument of Wryt. For an absolute
prohibition, "must" would have been used.

In the later quote, the sentence including "new readers" refers to the
irrelevance of such as the repetition of "The" in
<body><p>The</p><script><div ID="The">The</div></script></body>

You remind me : I'd like to locate the (thought to be) C P Snow quote in
which an academic (A) says, of another (B), that A does not so much mind
the B has not written any books as that B seems not to have read any.

General : my Rounding is now in js-round js-rndg1 js-rndg2 js-rndg3 and
no longer in $rnd.

Very Basic CC Validation Javascript	0	Oct 29, 2019
About as basic "Newbie-Question" that you can get.	3	Sep 4, 2023
How to store data from a sign up form on a website into an sql databse	1	Sep 9, 2022
Help with code	0	Jun 12, 2022
How to save JSON Data to a file using fetch() api?	2	Apr 28, 2022
How can I arrange a series of radio buttons?	2	Jan 25, 2024
Novice Request - onClick Reset	7	Sep 2, 2007
Help with Visual Lightbox: Scripts	2	May 3, 2023

Very simple question from a novice

Knut Olsen-Solberg

Randy Webb

ASM

Matt Kruse

Michael Winter

Randy Webb

Randy Webb

ASM

Matt Kruse

Randy Webb

VK

Randy Webb

VK

Randy Webb

Dr John Stockton

Randy Webb

Dr John Stockton

Randy Webb

Knut Olsen-Solberg

Dr John Stockton

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads