By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,843 Members | 2,311 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,843 IT Pros & Developers. It's quick & easy.

changing contents of div tag using javascript

P: n/a
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.

Oct 1 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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').innerHT ML=this.value">

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Oct 1 '05 #2

P: n/a
Randy Webb wrote :
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').innerHT ML=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').firs tChild.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
--
remove blah to email me
Oct 2 '05 #3

P: n/a
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:
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').innerHT ML=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').firs tChild.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

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Oct 2 '05 #4

P: n/a
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
--
remove blah to email me
Oct 3 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.