Changing paragraph text on image click (Javascript)

Question

I'm working on a midterm project for my Intro to Javascript class, and I've got the required part down (an image gallery where you click a thumbnail to change the central image), but I would also like to change the text in a paragraph below the central image (not a requirement of the project, and not something we've been taught in class, but I would like to know how to do it because it would enhance the project) when the thumbnail is clicked.

I've looked at several answers related to this, and they all seem to rely on the manual population of an array, but my paragraph text is going to be rather long so I'd like to automatically populate the array with members of a class (.text), if that's possible. (Or find some other workaround.) We've learned a bit of JQuery but we're not allowed to use it for this project, which is a shame since I'm sure it would be much easier with it. Here's the relevant part of my project:

HTML:

<ul id="gallery">
    <li>
        <a href="images/charactername.gif" title="Character Name" id="first_link">
        <img src="images/thumbs/charactername.png"></a>
        <p class="text">Character Information</p>
    </li>            
    <li>
        <a href="images/charactername.gif" title="Character Name">
        <img src="images/thumbs/charactername.png"/></a>
        <p class="text">Character Information</p>
    </li>
    (several more similar blocks for different characters)
</ul>

<p><img src="images/character.gif" id="image"></p>
<h2 id="caption">Character Name</h2> 
<p id="blurb">Large amount of text summarizing character's backstory/traits/etc.</p>

Javascript:

window.onload = function () {
    var listNode = $("gallery");
    var captionNode = $("caption");
    var imageNode = $("image");

    var imageLinks = listNode.getElementsByTagName("a");

    var i, linkNode, image;
    for ( i = 0; i < imageLinks.length; i++ ) {
        linkNode = imageLinks[i];

        linkNode.onclick = function (evt) {
            var link = this;          // link is the linkNode
            imageNode.src = link.getAttribute("href");
            captionNode.firstChild.nodeValue = link.getAttribute("title");
        };
};

I can set the Character Name easily using the title, but changing the #blurb text below to match each character's info paragraph onclick is evading me. I feel like if I can find a way to automatically populate the array with the paragraph #text, I should be able to set the text of #blurb to array[i] or something similar, but I'm not sure. I'd vastly appreciate some help. Thank you.

Answer 1

I don't know if this is how you would do it in your class, but I thought I would add an example of how you might do it.

var listNode = document.getElementById('list-node');
var imageLinks = listNode.getElementsByTagName("a");
var i;
var characterText;

for (i = 0; i < imageLinks.length; i += 1) {

    // Add a click event listener
    imageLinks[i].addEventListener("click", function (evt) {
        // Prevent the default functioning
        evt.preventDefault();
        // Get the character text
        characterText = getCharacterText(this.parentNode);
        // Update the blurb
        document.getElementById('blurb').innerText = characterText;
    });
}

/**
 * Returns the character text of an item in list-node.
 *
 * @param parentNode, the list item that contains the character
 *   description node.
 * @return characterText, the text of the character description
 */
function getCharacterText(parentNode) {
    return parentNode.getElementsByClassName('text')[0].innerText;
}

JS fiddle, for what it's worth: http://jsfiddle.net/9ekcgeyq/