# Onclick Replace Text Javascript HELP!!!



## aldernon (May 20, 2008)

Ok so Im building a small lyrics page for a friend.

The page contains 2 tables.
Left table is a list of songs.
Right table is an empty text box.


I want to make it so when a user clicks a song name on the left side, the song's lyrics appear in the text box on the right.

I will understand any code you type, so please dont be shy. I've programmed, im just not fluent, dont know all the commands.

Im thinking I need to use some kind of onclick-replace text command with Javascript. Ive been looking around and all the sites ive found have given me examples for one button, and one result.




Here is a demo of the page, it will help you understand (looks bad in IE, Firefox works fine):
http://www.musicamor.com/iu/test

Click the song on the left, get the lyrics on the right.



Thank you for reading!


----------



## jamiemac2005 (Jul 5, 2007)

Hey, i believe i can be of some assistance:

Firstly you need an ID on this line:

```
<div class="page" style="border:thin inset; margin-right:40px; padding:6px; width:485px; height:312px; overflow:auto">
```
So it becomes:


```
<div class="page" [B]id="songStuff"[/B] style="border:thin inset; margin-right:40px; padding:6px; width:485px; height:312px; overflow:auto">
```
(p.s. my names wont be very descriptive, you're better to come up with some yourself but mine are here for examplessake)

now you need to set up the HTML that you're going to use for each of the songs in an array, then a function to change the content of the right hand box to the content of the array item:

(i'll shove this in a script, which should go in the head of your website)

```
<head>
........

<script language="Javascript">
//Set up an array of all the content
var lyricsArray = new Array();
lyricsArray[0] = "<p>Lyrics for the first song(Actually the content of th right hand box when the first song is clicked)</p>...";
lyricsArray[1] - "<p>The same for the second song</p>";
//... do the same for all the songs [the entire html content of the right hand side]

//the main function to change the content
function changeContent(songNo){
//get a handle for the box object
var contentBox = document.getElementById("songStuff");
//change the innerHTML to the array item
contentBox.innerHTML = lyricsArray[songNo];
}
</script>

....
</head>
```
Now set up the event handler on each of the song titles:


```
<b onClick="changeContent(0);">Um Pouco Mais<p></b>
<b onClick="changeContent(1);">Tudo que se foi<p></b>

<!-- ... and so on //-->
```
4 points i need to make though are:
1) using onClick on a <b> element probably isn't adviseable
2) you have <p> tags nested within your <b> tags (so paragraph within bold) can i just ask if theres a reason? if you need the <p> tags then close them (change them to "<p />") 
3) You didn't close the <div> tag with the classname "page"
4) i have not written this out i have simply analysed your code and looked at what's going on, so if there are any errors post back

Hope it helps or gets you started,

Jamey


----------



## aldernon (May 20, 2008)

I think that is EXACTLY what I needed, thank you very much for your help Jamey! Ill post my finished results in a few hours 

Regarding my errors, i can only blame my lack of sleep hahaha, look at the time i posted on the forum 
Fixing them now as i type tho, glad you picked up on them 

-Thanks


----------



## jamiemac2005 (Jul 5, 2007)

Thats k =] glad i could be of help, i haven't used javascript for anything major in 7 months it was good to have a refresher.

Cheers,
Jamey


----------



## aldernon (May 20, 2008)

ok so ive built it up, and the song names in the left hand side dont appear to be buttons, they arent clickable

Any suggestions?


----------



## aldernon (May 20, 2008)

It doesnt work


----------



## jamiemac2005 (Jul 5, 2007)

Hey, i looked through the source again, Theres two problems in the script(that i can see) anyway i downloaded the source and tried a fix and it worked.... so:

this:

```
var contentBox[b].innerHTML[/b] = document.getElementById("songStuff");
//change the innerHTML to the array item
contentBox.innerHTML = lyricsArray[songNo];
```
needs to be this(without .innerHTML on the variable decleration):


```
var contentBox = document.getElementById("songStuff");
//change the innerHTML to the array item
contentBox.innerHTML = lyricsArray[songNo];
```
... and this:

```
lyricsArray[0]="<p><strong>Musica: Um Pouco Mais</strong></p>
<p>Autor: Nicolas Yazo Gondo</p>
<p>Mais uma noite em que eu me perco ao tentar de esquecer<br>
e saio as ruas a procurar me entender<br>
Lá fora o vento está quente cada coisa em seu lugar<br>
E sinto um fogo ardente que controla o meu pensar</p>
<p>Refrão</p>
<p>Pois você me faz quere viver um pouco mais<br>
É você me faz buscar em ti minha paz</p>
<p>Escolhi meus caminhos sem poder enxergar<br>
Mesmo assim eu sigo em frente sem ter rumo a trilhar<br>
Mais uma vez o sol decidiu me iluminar<br>
Meus medos vão passando posso até me levantar</p>
<p>Refrão</p>
<p>Pois você me faz quere viver um pouco mais<br>
É você me faz buscar em ti minha paz (2x)</p>
<p>Refrão</p>
<p>Pois você me faz quere viver um pouco mais<br>
É você me faz buscar em ti minha paz (2x)</p>";
```
needs to be all on one line (so do all the other lyricsArray items[because js tries to terminate the string at the end of the line])

like this:

```
lyricsArray[0]="<p><strong>Musica: Um Pouco Mais</strong></p><p>Autor: Nicolas Yazo Gondo</p><p>Mais uma noite em que eu me perco ao tentar de esquecer<br>e saio as ruas a procurar me entender<br>Lá fora o vento está quente cada coisa em seu lugar<br>E sinto um fogo ardente que controla o meu pensar</p><p>Refrão</p><p>Pois você me faz quere viver um pouco mais<br>É você me faz buscar em ti minha paz</p><p>Escolhi meus caminhos sem poder enxergar<br>Mesmo assim eu sigo em frente sem ter rumo a trilhar<br>Mais uma vez o sol decidiu me iluminar<br>Meus medos vão passando posso até me levantar</p><p>Refrão</p><p>Pois você me faz quere viver um pouco mais<br>É você me faz buscar em ti minha paz (2x)</p><p>Refrão</p><p>Pois você me faz quere viver um pouco mais<br>É você me faz buscar em ti minha paz (2x)</p>";
```
You'll have to make that change on each of the lyricsArray items (make sure they're all on one line so the javascript interpreter doesn't try to terminate them at the end of the line)...

Also about the buttons, i see you have one at the top of the left hand side so i think you have this sorted anyway, but i suggest trying:

```
<button onClick="changeContent(0);">Um Pouco Mais</button><br />
<button onClick="changeContent(1)">Tudo que se foi</button><br />
<button onClick="changeContent(2)">Sonho</button><br />
<button onClick="changeContent(3)">Eu sem você</button><br />
<button onClick="changeContent(4);">Caros amigos</button><br />
<button onClick="changeContent(5);">Comigo</button><br />
<button onClick="changeContent(6);">Pelo Menos uma vez</button><br />
<button onClick="changeContent(7);">Não mudou nada</button><br />
<button onClick="changeContent(8);">Inspiração</button><br />
<button onClick="changeContent(9);">Karina</button><br />
<button onClick="changeContent(10);">Derrepente o teu olhar</button><br />
<button onClick="changeContent(11);">Teu Olhar</button><br />
```
Which will make them all buttons with less code...

Other points to make:
- you use <p> (paragraph) tags everywhere (some of them unclosed) either:
> Close them: <p>...other code...</p>
or
> use <br /> tags in their place[only in the buttons section because the html for the content is fine], the effect will be the same/close

- you may want to have the first song's lyric content loaded with the page (which would be done by having the content for a song in the content box in the html)


.... Anyways, use what i've said to get it working and if it still doesn't work then post back for more help =]

Cheers,
Jamey


----------



## aldernon (May 20, 2008)

I just want to take this opportunity to thank you for your help! The code works great, and its exactly what I wanted 

Your great 

Heres the finished Produce (almost finished, just have to include all the songs now)
http://www.musicamor.com/iu/test

Now All I have to do is make it not look so bad in Internet Explorer 

Thank You!


----------



## jamiemac2005 (Jul 5, 2007)

Thats k =] glad to help,

Jamey


----------



## hirni (May 24, 2009)

Hi, sorry for bringing up this old thread :1angel:, but it's exactly what I'm having trouble with.

Honestly, I have absolutely no idea about javascript and usually just copy into my page what I find may fit - and most of the times it works.

Now this one I didn't get to work so far... could anybody explain me how to define the song list and the lyrics box so that it makes what it's supposed to? Is the id "songStuff" for the area where the lyrics will appear? Do I have to call anything "contentBox"? As an id?! :4-dontkno

I'd be very happy indeed if anybody could help me here.

Thanks :grin:


----------

