Need a simple solution for using javascript to change text

Hello all,

I am creating a website and I want to have a list of names. Say for example
'name1', 'name2', and 'name3'. Depending on which name you click, I would like the page to change according to how that name is defined in my variables.

Basically, I need to be able to click a name, and have the appropriate image appear in a separate column of the website.

When "Name 1" is pressed in column 1, I need:

<img src="../images/name1.jpg">

to be parsed in column 2. This is undeniably probably one of the most common javascript usages. Being the uber noob that I am, I have no clue how to go about doing it. Could anyone offer some good information?

 

something like that maybe:

<script type='text/javascript'>
function changeImage(name)
{
  document.getElementById('image').src = '../images/'+name+'.jpg'; //changes the 'src' attribute of the image, setting it to the 'value' attribute of the selected button.
}
</script>
<input type='button' value='name1' onclick='changeImage(this.value)'>
<input type='button' value='name2' onclick='changeImage(this.value)'>
<input type='button' value='name3' onclick='changeImage(this.value)'>
<img src='../images/name1.jpg' id='image'>

HTML:

This is a way to do what you want. The code can be changed to fit your case, but you didn't mention where you store those names.. You can change the buttons in my code with the elements that you wanna hold that names and use them instead. If you still have some problems, feel free to ask for clearance

 

Thanks, this would be perfect, but I should have been more specific. I don't need to change just one image, I need to parse several lines of HTML per different "Name".

Perhaps if I tell you what I'm trying to do, you could understand it and help me understand what I need to do:

I want to have several names of athletes on a team. When you click an athletes name in column one, their name, photo, and biography (simple HTML elements) appear in column 2. Each time you click a name, the previous athlete's information will disappear and be replaced by the new info.

 

Then you just need to add all columns that need to be changed inside the changeImage() function (and rename it perhaps ). You should also store the information about the athletes somewhere so it can be updated without reloading the page. I'll use some JS arrays in the example.

<script type='text/javascript'>
var athlete_name = new Array('athl1', 'athl2', 'athl3'); //store the names of everyone on the team
var athlete_image = new Array('img 1.jpg', 'img 2.jpg', 'img 3.jpg'); //store the image filenames of everyone on the team
var athlete_biographies = new Array('bio 1', 'bio 2', 'bio 3'); //store the biography of everyone on the team

function changeImage(id)
{
   document.getElementById('athlete_name').innerHTML = athlete_names[id];

  document.getElementById('athlete_image').src = '../images/'+athlete_img[id]; //changes the 'src' attribute of the image, setting it to the 'value' attribute of the selected button.
  
     document.getElementById('athlete_biography').innerHTML = athlete_biographies[id];
}
</script>
<input type='button' value='0' onclick='changeImage(this.value)'>
<input type='button' value='1' onclick='changeImage(this.value)'>
<input type='button' value='2' onclick='changeImage(this.value)'>
<div id='athletes_info'>
<span id='athlete_name'></span>
<img src='../images/name1.jpg' id='athlete_image'>
<span id='athlete_biography'></span>
</div>

HTML:

Now, you insert the data in the three arrays which are at the top of the code (athlete_name, athlete_image, athlete_biographies) and they will all be changed when you click one of the buttons.

The thing you wont to do is not complicated at all, but i don't have the time to explain it further now. I even haven't tested the code but it should be working. If i have the time i'll check on you later. Hope you understand what i've done

 

Thanks for your help, I should have known to use a javascript array. I tried your code, but it didn't work. I really appreciate your help thus far!

 

Try:

<div id="column-1">
   <ul>
      <li><a href="#" onclick="document.getElementById('column-2').innerHTML = '<img src=\'/images/name1.jpg\' alt=\'\'">Name 1</a></li>
      <li><a href="#" onclick="document.getElementById('column-2').innerHTML = '<img src=\'/images/name2.jpg\' alt=\'\'">Name 2</a></li>
      <li><a href="#" onclick="document.getElementById('column-2').innerHTML = '<img src=\'/images/name3.jpg\' alt=\'\'">Name 3</a></li>
   </ul>
</div>
<div id="column-2">
</div>

Code (markup):

 

YOU! my friend need to venture into the wonderful world of Databases, ASP/PHP and AJAX!

 

My website is programmed in MsSQL/ASP, and I have used AJAX, although this is such an easy function, I figured it might be quicker to do a javascript. Well it took me a bit longer to figure out than I expected, but it was certainly a good learning experience.

Slightly modified this to fit my needs and it worked! Thanks!

 

No problem, glad I could be of assistance!