/    Sign up×
Community /Pin to ProfileBookmark

changing text onClick()

Copy linkTweet thisAlerts:
Nov 12.2003

I have some text at the bottom of my page that I want to change when different images are clicked. I am not sure how to just change the text. When I use the document.write it writes the text to a new screen. Like to do a rollover with an image you can change the src of the image by using javascript, but how would you change just some text?

Any help would be appreciated.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesNov 12.2003 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<title>Example</title>

<ul>

<li><img alt="Bettie in a bikini." onclick="document.getElementById('text').firstChild.data = this.alt" src="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg"></li>

<li><img alt="Bettie and her under-garments." onclick="document.getElementById('text').firstChild.data = this.alt" src="http://www.bettiepage.com/images/photos/leggy/leggy1.jpg"></li>

<li><img alt="Bettie with a whip." onclick="document.getElementById('text').firstChild.data = this.alt" src="http://www.bettiepage.com/images/photos/whip/whip7.jpg"></li>

</ul>

<p id="text">&amp;nbsp;</p>[/font]
Copy linkTweet thisAlerts:
@clairec666Nov 12.2003 — <div id="text">

<img src="" onmouseover="changetext('Hello')">

<script type="text/javascript">

function changetext(msg) {

document.all.text.innerHTML = msg;

}

</script>
Copy linkTweet thisAlerts:
@CharlesNov 12.2003 — [i]Originally posted by clairec666 [/i]

[B]<div id="text">

<img src="" onmouseover="changetext('Hello')">

<script type="text/javascript">

function changetext(msg) {

document.all.text.innerHTML = msg;

}

</script> [/B][/QUOTE][font=georgia]That's a non-sstandard, MSIE only version.[/font]
Copy linkTweet thisAlerts:
@JaviumNov 13.2003 — Leigh,

Thank you very much for your great help on my slideshow with array (see under <How do I a 'GoTo'> section). It works perfectly (I wrote the code accordingly to my needs).

The images are changing after some seconds but the text that is below the image (such a descriptive line) is not updated. As you, I have the same problem, so I am unable to help you at this time. I'm sorry...

What I have done, is created a table, with two cells, one for the image, and the other for the description.

My question is: [B]How can I change the content of a table cell (text only) ?[/B]

Javium
Copy linkTweet thisAlerts:
@JaviumNov 15.2003 — Leigh,

I have the solution!

You have to create a table where the text will be put inside. You can of course create a borderless table with border=0.

Then you can use the function change() to change te content of the cell.

The below demo will change the value of the cell after 2 seconds.

Hope it helps you! ?

<html>

<head>

<title>New Page 1</title>

</head>

<body>

<table width=500 border=1>

<tr><td id="boxmain" align="right">First text to be read</td></tr>

<tr><td bordercolor="black" bgcolor="ivory" height="18"><font id="boxdescription" face="Verdana" size="2"></font></td></tr>

</table>

<script language="javascript">

setTimeout("change()",2000);

function change() {

var tx = "The new value is now displayed"

document.getElementById("boxmain").innerHTML = tx // either "boxdescription" or "boxmain" are okay

}

</script>

</body>

</html>
×

Success!

Help @leighhalliday 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.15,
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,
)...