[SOLVED] Need a crash course in Java

[yzerman]

Basically the idea is to create a function in existing code, that would display an image caption below the image in a div with the id photoCaption encapsed in <p> tags.

 

I'm new to javascript, so Im truly an idiot when it comes to googleing anything like this.

 

Here is what I have tried so far (this is non working code):

 

function addCaption() {
    if (thumbnails[currentImageIndex].className.match(/description:=(.+)=/)) {
addCaption = document.getElementById('photoCaption');
var descriptionInfo = document.createElement('p');
var addCaption = document.getElementById('photoCaption').firstChild;
       addCaption.data = '%CAPTION%' + RegExp.$1;

    }
}

 

The expected output would be (Caption: is set in a variable CAPTION, and the caption itsself is embedded in the class of the thumbnail image as description:=".$image['caption']."= )

<p>Caption: This is what the caption of the current image says</p>

 

Now obviously the code above doesn't work, which is why I am here. What am I doing wrong.

 

[fenway]

What doesn't work about it?

[yzerman]

addCaption.data is not being assigned any values, so its not returning anything, which is confusing me.

[fenway]

.data? That's an unusual attribute to set.

[yzerman]

ok this code works:

function addCaption(thumbIndex) {
    if (thumbnails[currentImageIndex].className.match(/description:=(.+)=/)) {
var itemCaption = document.getElementById('photoCaption').firstChild;
var dataCaption = document.createElement('p');
var caption = document.createTextNode(CAPTION + RegExp.$1);
dataCaption.innerHTML = itemCaption.appendChild(caption)
    }
}

 

Now my problem lies in the fact that every time I click a new thumbnail, it appends the data to the existing <p> tag that was created when i first clicked the thumbnail:

 

<div id="photoCaption">
<p>Caption: SunsetCaption: SunsetCaption: Blue hills with a blue sky backdropCaption: Winter in AlaskaCaption: Blue hills with a blue sky backdrop</p>

 

How do I get it to update the caption instead of appending it to the end?

[yzerman]

Figured this one out on my own, thanks for the help though.

 

What I did was add an attribute to the html tag called caption, and added the caption to that attribute, then:

 

function addCaption(thumbIndex) {
    	var itemCaption = document.getElementById('photoCaption').firstChild;
itemCaption.data = thumbnails[thumbIndex].getAttribute('caption');
}