Changing the text in an HTML <p> tag depending on which canvas image a user clicks

Question

I have an HTML5 canvas which is displaying a number of images. I have used the KineticJS library to draw the images and make them draggable, however, I'm using a local copy of the library, since there are one or two changes I wanted to make to its functionality.

I now want to add some more functionality to the mousedown function in the library, but I'm not exactly sure of how to do what I want to, and I'm just wondering if anyone can point me in the right direction?

I currently have about 30 images being displayed on the canvas- the images are all stored in a hidden section in the HTML, and have been added to a JS array from there. I also have another JS array, in a separate JS file, which contains an array of textual descriptions about each of the images in the image array.

The text at position 0 in the text array is the description for the image at position 0 in the image array, text at position 1 for image at position 1, etc...

I have and HTML <p></p> tag on my page below the canvas.

What I now want to do is add a function that will change the text displayed in that <p></p> tag depending on the image that has been clicked on on the canvas... i.e. add some code to the mousedown function, that says

"when a mousedown is detected on an image, find out what position in the images array that image is stored at, and update the text in the <p></p> tag to display the text stored at the corresponding location in the text array.

Theoretically, I would have thought that this should be fairly straightforward, but I'm just not sure how to do it... Presumably I need to write a new JS function, i.e.

function displayTip(){
    document.getElementById('tipsParagraph').innerHTML= tips[0];
}

and then call that function from within the mousedown function in the library.

What I'm not sure about is how to find out what position the image that's been clicked on is in the images array, so that I can store it in a variable, and then set the tips[] value to the value of that variable, to give me the same position in the tips array.

I assume I'm going to need to edit the mousedown function in the library a little bit, to tell it to find out what array position the image that's been clicked on is at, but I'm not sure how to do this... any ideas?

The mousedown function currently looks like this:

_mousedown: function(evt) {
    this._setUserPosition(evt);
    var obj = this.getIntersection(this.getUserPosition());
    if(obj && obj.shape) {
        var shape = obj.shape;
        this.clickStart = true;
        shape._handleEvent('mousedown', evt);

    }

    //init stage drag and drop
    if(Kinetic.DD && this.attrs.draggable) {
        this._initDrag();
    }
}

Also, I assume that once I have found out where in the array the image is stored, I will then want to add a call to my displayTip function in the mousedown function?

Answer 1

I managed to solve this by adding in the following function:

function displayTip(index){

    document.getElementById('tipsParagraph').innerHTML = tips[index];
    console.log("displayTip being called");
}

to my JavaScript, and calling it from within the mousedown function using the line:

displayTip(obj.shape.index);