/    Sign up×
Community /Pin to ProfileBookmark

Changing plain HTML text using JavaScript

Copy linkTweet thisAlerts:
Oct 02.2006

Hi,

I know I can change the content of, say, a text box in response to an event using JS DOM:

[code]
document.GetByElementId(‘mytext’).Value = “changed text”
[/code]

However, I want to change some of the plain text content on the screen in response to an event. I don’t know how to do this using JS DOM, as I don’t know of any objects, with value attribute, that outputs only plain text to the screen.

I know I can use document.write(), however I can’t seem to use this as I cannot change or write over text already on the screen when the event occurs.

How do I do this using Js?

Many thanks

Mark

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadOct 02.2006 — Hi there mjseaden,

does this help...
[color=navy]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#text_changer {
margin-bottom:30px;
cursor:pointer;
}
-->
</style>

<script type="text/javascript">
<!--
window.onload=function() {
document.getElementById('text_changer').onclick=function() {
document.getElementById('text_to_change').firstChild.nodeValue='Due to clicking the above this is now the replacement text';
}
}
//-->
</script>

</head>
<body>

<div id="text_changer">a click here will change the text below - hopefully</div>

<div id="text_to_change">This is the text that needs to be changed</div>

</body>
</html>[/color]
[i]coothead[/i]
Copy linkTweet thisAlerts:
@CharlesOct 02.2006 — You can also use "firstChild.data".
Copy linkTweet thisAlerts:
@cootheadOct 02.2006 — Hi there Charles,
[color=navy]You can also use "firstChild.data".[/color][/quote]
I do use it also. ?

Is one preferable to the other or is it merely a matter of taste?

[i]coothead[/i]
Copy linkTweet thisAlerts:
@CharlesOct 02.2006 — My example uses fewer key strokes.
Copy linkTweet thisAlerts:
@cootheadOct 02.2006 — [indent]Thanks for the enlightenment. ?[/indent]
Copy linkTweet thisAlerts:
@mjseadenauthorOct 02.2006 — Hi there,

Thanks for the response.

I've tried implementing "firstChild...".

Does the function have to be in the window loader to succeed, as I am currently getting the usual "no or null object" error from i.e. when attempting to access the <div> objects.

Many thanks

Mark
Copy linkTweet thisAlerts:
@mjseadenauthorOct 02.2006 — Here's some source code, if it helps:

<i>
</i>&lt;table&gt;&lt;tr&gt;&lt;td class="detail_row"&gt;Group ID&lt;/td&gt;&lt;td class="detail_row"&gt;&lt;div id="groupid"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class="detail_row"&gt;Description&lt;/td&gt;&lt;td class="detail_row"&gt;&lt;div id="description"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class="detail_row"&gt;Section ID&lt;/td&gt;&lt;td class="detail_row"&gt;&lt;div id="sectionid"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class="detail_row"&gt;Min. Price&lt;/td&gt;&lt;td class="detail_row"&gt;&lt;div id="minprice"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class="detail_row"&gt;Max. Price&lt;/td&gt;&lt;td class="detail_row"&gt;&lt;div id="maxprice"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;script type="text/javascript"&gt;
function changetext( groupid )
{
document.getElementById('groupid').firstChild.nodeValue= document.getElementById('groupid' + groupid).Value
document.getElementById('description').firstChild.nodeValue= document.getElementById('description' + groupid).Value
document.getElementById('sectionid').firstChild.nodeValue= document.getElementById('sectionid' + groupid).Value
}
&lt;/script&gt;

It can't see the divs - any reason why? (Doesn't like 'firstChild', says it's null).
Copy linkTweet thisAlerts:
@cootheadOct 02.2006 — Hi there mjseaden,

instead of using...
[color=navy]
&lt;div id="groupid"&gt;&lt;/div&gt;

&lt;div id="description"&gt;&lt;/div&gt;

&lt;div id="sectionid"&gt;&lt;/div&gt;
[/color]
...use...
[color=navy]
&lt;div id="groupid"&gt;[color=red]&amp;nbsp[/color]&lt;/div&gt;

&lt;div id="description"&gt;[color=red]&amp;nbsp[/color]&lt;/div&gt;

&lt;div id="sectionid"&gt;[color=red]&amp;nbsp[/color]&lt;/div&gt;
[/color]
[i]coothead[/i]
×

Success!

Help @mjseaden spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...