changing contents of div tag using javascript

[engwar]

I'd like to know if it's possible to change the contents of a div tag
based on something the user is doing.

For example. If there is a text box on a page and the user types his or
her name can I update an existing div tag to show what they've typed
in?

Thanks.

 

[Randy Webb]

engwar said the following on 10/1/2005 7:00 AM:

I'd like to know if it's possible to change the contents of a div tag
based on something the user is doing.
Yes.

For example. If there is a text box on a page and the user types his or
her name can I update an existing div tag to show what they've typed
in?

<input type="text"
onchange="document.getElementById('myDiv').innerHTML=this.value">

 

[Gérard Talbot]

Randy Webb wrote :

engwar said the following on 10/1/2005 7:00 AM:



<input type="text"
onchange="document.getElementById('myDiv').innerHTML=this.value">

Personally, I would recommend to use childNodes[0].nodeValue or
firstChild.nodeValue rather since the input only takes text; there is
really no need to use innerHTML here. Also, the onchange could be
correct but the onkeyup (in order to see each typed character) event
attribute might be what the OP is looking for. The problem with the
onchange event attribute is that the user will only see the result when
*leaving* the input.

So, another possible solution:

<div>&nbsp;<span id="NameTyped">&nbsp;</span></div>

<form action="">
<p>Type in your name: <input name="InputOfName" type="text"
onkeyup="document.getElementById('NameTyped').firstChild.nodeValue =
this.value;" value=" "></p>
</form>

Tested and working with a strict Doctype decl. in Mozilla 1.9a1, Opera
8.50, MSIE 6.

Gérard

 

[Randy Webb]

Gérard Talbot said the following on 10/1/2005 8:28 PM:

Randy Webb wrote :

engwar said the following on 10/1/2005 7:00 AM:




<input type="text"
onchange="document.getElementById('myDiv').innerHTML=this.value">

Personally, I would recommend to use childNodes[0].nodeValue or
firstChild.nodeValue rather since the input only takes text; there is
really no need to use innerHTML here.

That depends on the purpose and intent. Enter <b>Bold Text</b> into both
mine and yours and see the difference.

Again, it depends on desire.

But, if a person is wanting HTML to be processed, neither innerHTML or
nodeValue is appropriate.

Also, the onchange could be correct but the onkeyup (in order to see
each typed character) event attribute might be what the OP is looking for.
The problem with the onchange event attribute is that the user will only see
the result when *leaving* the input.

Yes, and the problem with the onkeyup is that I see two things changing
at once and becomes very annoying.

So, another possible solution:

<div>&nbsp;<span id="NameTyped">&nbsp;</span></div>
<form action="">
<p>Type in your name: <input name="InputOfName" type="text"
onkeyup="document.getElementById('NameTyped').firstChild.nodeValue =
this.value;" value=" "></p>
</form>

Yes, but neither of us object detected to ensure there was support for
either, and I don't care to write it. That is for others to do.

Another thing to note: innerHTML is more widely supported than
firstChild.nodeValue. That is part of why .innerHTML is used in DynWrite
and nodeValue is not. Even though DynWrite does not test for innerHTML

 

[Gérard Talbot]

Randy Webb a écrit :

Another thing to note: innerHTML is more widely supported than
firstChild.nodeValue. That is part of why .innerHTML is used in DynWrite
and nodeValue is not. Even though DynWrite does not test for innerHTML

How much more widely is innerHTML supported compared to
firstChild.nodeValue? I only see IE 4, NS 4 and non-javascript browsers
(Lynx, etc.) ... which don't support firstChild.nodeValue; the rest of
browsers do... just like they do support innerHTML.

As far as I know, all browsers which support innerHTML also support
firstChild.nodeValue. If I'm wrong, then I don't think there will be a
lot of browsers/browser versions.

Gérard