Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Switching text with onClick( )

Status
Not open for further replies.
internetguy

internetguy

Technical User
Nov 22, 2003
57
US
I have a photogallery that I want to have an image and description show when I click a thumbnail. The images work, but I do not know what to do with the text. Here is my source for my main page:

Code: 
<textarea name="information">Information goes here</textarea>

and here is my javascript switch statement:

Code: 
function descriptionChange(name){
	switch(name){
		case "pine":
			document.getElementById("information") = document.write("Ponderosa Pine seeds are collected and identified by seed zone.");
		break;
		case "nursery":
			document.getElementById("information") = document.write("Poderosa Pine seedlings growing at a tree nursery - We plant more than 7,000,000 trees per year.");
		break;
		case "thinning":
			document.getElementById('information') = document.write("Pre-commercial thinning a recovering forest - 10 years after Fountain Fire in Shasta County.");
		break;
		case "meadow":
			document.getElementById('information') = document.write("A forest meadow.");
		break;
		case "fuel":
			document.getElementById('information') = document.write("Defensible fuel protection zone (DFPZ) or shaded fuel break.");
		break;
		case "lily":
			document.getElementById('information') = document.write("Glacier Lily, Erythronium grandiflorum");
		break;
		case "height":
			document.getElementById('information') = document.write("Forester measuring tree height.");
		break;
		case "hawk":
			document.getElementById('information') = document.write("Wildlife biologist preparing to release a radio-collared Goshawk.");
		break;
		case "helicopter":
			document.getElementById('information') = document.write("Helicopter logging.");
		break;
		case "station":
			document.getElementById('information') = document.write("1 of 22 permanent weather station installations on SPI forest land.");
		break;
		case "research":
			document.getElementById('information') = document.write("Research forester downloads information from a campbell weather station.");
		break;
		case "flow":
			document.getElementById('information') = document.write("Reserch forester measuring stream flow.");
		break;
		default:
			document.getElementById('information') = document.write("Ponderosa Pine seeds are collected and identified by seed zone.");
		break;
	}
}

I know I have the event handler part correct, I am just unsure about the way the switch statement is done.
 
Sort by date Sort by votes
use either of these:

Code: 
document.getElementById("information").value = 'blah blah blah';
Code: 
document.getElementById("information").innerHTML = 'blah blah blah';

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
lol, I hate how the most troubling problems have the easiest solutions. Thanks.
 
Upvote 0 Downvote
You could also embed the descriptions in the relevant tags which would make maintenance a lot easier. In your script header,
Code: 
function describe(thisObject) {
  document.getElementById("information").value = thisObject.description;
}
and, in your HTML,
Code: 
<span onclick="describe(this)" description="blah blah blah">
  <IMG ...>
</span>
<span onclick="describe(this)" description="more interesting">
  <IMG ...>
</span>

Yours,

fish


&quot;As soon as we started programming, we found to our surprise that it wasn't as easy to get programs right as we had thought. Debugging had to be discovered. I can remember the exact instant when I realized that a large part of my life from then on was going to be spent in finding mistakes in my own programs.&quot;
--Maurice Wilkes
 
Upvote 0 Downvote
Sorry for the double post, but it still doesn't want to work. Could this be because the text box is nested in the page? I changed the textarea tag to a div tag. Here is my page source.

Code: 
<html>
<head>
<title>Test Page</title>
<link href="../style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="photolib.js"></script>

</head>
<body>
<table width="780" height="100%" cellspacing="0" cellpadding="0" class="main">
  <tr>
    <td height="25" colspan="2" background="../pictures/topBarsMinor.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td height="100"><a href="../index.html"><img src="../pictures/logoMinor.jpg" width="180" height="100" border="0"></a></td>
    <td height="100" background="forests_images/headers/fires.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td height="25" colspan="2" background="forests_images/titles/photolib.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td width="180" valign="top" bgcolor="7EB37F">
    Navigation Here:
    </td>
    <td class="content">
	<p><a href="../index.html">Home</a> &gt; Photo Library </p>
	<table width="570" border="0" cellspacing="0" cellpadding="0">
	 <tr>
	  <td valign="top" width="160">
	<table width="160" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="80" height="80" align="center"><a onClick="return(loadPosterImage('forests_images/photolib/Seeds-and-cones.jpg')); descriptionChange('pine');"><img src="forests_images/photolib/thumbs/Seeds-and-cones.jpg" width="75" height="75" border="0"></a></td>
        <td width="80" align="center"><a onClick="return(loadPosterImage('forests_images/photolib/Tree-nursery.jpg')); descriptionChange('nursery');"><img src="forests_images/photolib/thumbs/Tree-nursery.jpg" width="75" height="75" border="0"></a></td>
        </tr>
      <tr>
        <td height="80" align="center"><a onClick="return(loadPosterImage('forests_images/photolib/Pre-commercial-thinning.jpg')); descriptionChange('thinning');"><img src="forests_images/photolib/thumbs/Pre-commercial-thinning.jpg" width="75" height="75" border="0"></a></td>
        <td align="center"><a onClick="return(loadPosterImage('forests_images/photolib/Forest-Meadow-2.jpg')); descriptionChange('meadow');"><img src="forests_images/photolib/thumbs/Forest-Meadow-2.jpg" width="75" height="75" border="0"></a></td>
        </tr>
      <tr>
        <td height="80" align="center"><a onClick="return(loadPosterImage('forests_images/photolib/Fuelbreak.jpg')); descriptionChange('fuel');"><img src="forests_images/photolib/thumbs/Fuelbreak.jpg" width="75" height="75" border="0"></a></td>
        <td align="center"><a onClick="return(loadPosterImage('forests_images/photolib/FawnLilyamw.jpg')); descriptionChange('lily');"><img src="forests_images/photolib/thumbs/FawnLilyamw.jpg" width="75" height="75" border="0"></a></td>
        </tr>
      <tr>
        <td height="80" align="center"><a onClick="return(loadPosterImage('forests_images/photolib/Amanda-measuring-ht.jpg')); descriptionChange('height');"><img src="forests_images/photolib/thumbs/Amanda-measuring-ht.jpg" width="75" height="75" border="0"></a></td>
        <td align="center"><a onClick="return(loadPosterImage('forests_images/photolib/Goshawk.jpg')); descriptionChange('hawk');"><img src="forests_images/photolib/thumbs/Goshawk.jpg" width="75" height="75" border="0"></a></td>
        </tr>
      <tr>
        <td height="80" align="center"><a onClick="return(loadPosterImage('forests_images/photolib/Helicopter-2.jpg')); descriptionChange('helicopter');"><img src="forests_images/photolib/thumbs/Helicopter-2.jpg" width="75" height="75" border="0"></a></td>
        <td align="center"><a onClick="return(loadPosterImage('forests_images/photolib/Weather-station-install.jpg')); descriptionChange('station');"><img src="forests_images/photolib/thumbs/Weather-station-install.jpg" width="75" height="75" border="0"></a></td>
        </tr>
      <tr>
        <td height="80" align="center"><a onClick="return(loadPosterImage('forests_images/photolib/Research.jpg')); descriptionChange('research');"><img src="forests_images/photolib/thumbs/Research.jpg" width="75" height="75" border="0"></a></td>
        <td align="center"><a onClick="return(loadPosterImage('forests_images/photolib/MikeFlow.jpg')); descriptionChange('flow');"><img src="forests_images/photolib/thumbs/MikeFlow.jpg" width="75" height="75" border="0"></a></td>
        </tr>
    </table>
	  </td>
	  <td align="center" valign="top">
	    <p><img src="forests_images/photolib/Seeds-and-cones.jpg" name="imagePoster"></p>
		<div id="information">Ponderosa Pine seeds are collected and identified by seed zone.</div>
	  </td>
	 </tr>
	</table>
	</td>
  </tr>
  <tr>
    <td valign="top" bgcolor="7EB37F">&nbsp;</td>
    <td align="center" class="content"><a href="../legal.html">Legal</a></td>
  </tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
105
feherke
feherke
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
102
ggriffit
ggriffit
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
106
Samthyr
Samthyr
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
72
JPSeo
JPSeo
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
121
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top