JavaScript using a function to change the text displayed in the HTML <p> tag

Question

I have an HTML5 canvas that displays the number of images and a paragraph of text on the page below the canvas. I want the text in the paragraph to be updated to display an item other than the JS array, depending on which image the user clicks.

I currently have a mousedown function that 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); isClickOnImage(evt); var id = shape.id; selectTip(id); } //init stage drag and drop if(Kinetic.DD && this.attrs.draggable) { this._initDrag(); } } 

I tried using the string var id = shape.id to update the identifier passed to the function so that it would get the correct element from my "tips" array, but for some reason when viewing the page in the browser and click on the image, the text below the canvas not updated. It seems that this function does not update the 'id' variable to the identifier of any image that is clicked.

Looking at this, it seems to me that I want to use a loop inside the 'mousedown' function, which will take the 'id' of the image on which it was clicked and iterate over my array of 'sources' (where all the images were loaded from HTML to JS), checking at each position whether the image stored in this place has the same identifier as the image that was clicked. If so, the loop should set the text for the text stored in this position of the array, and if not, it should continue to scan the array until it finds it. Would that make sense? I tried to add the following code to the mousedown function, but it did not change the text as I expected:

 var imageCheckArray = 0; while(imageCheckArray < sources.length){ if(shape.id == sources[imageCheckArray]){ selectTip(imageCheckArray); } else { imageCheckArray++; } } 

Is there something I am missing from the loop?

The code for the entire 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); isClickOnImage(evt); /*This line needs to get the element of the sources array that has been selected, and then select the element at the same position from the tips array.*/ //var id = null; var imageCheckArray = 0; while(imageCheckArray < sources.length){ if(shape.id == sources[imageCheckArray]){ selectTip(imageCheckArray); } else { imageCheckArray++; } } //var id = //selectTip(id); } //init stage drag and drop if(Kinetic.DD && this.attrs.draggable) { this._initDrag(); } } 

Edit 01/01/2013 @ 16: 10

Code for selectTip :

 function selectTip(id){ $("#tipsParagraph").text(tips[id]); } 

and I posted jsFiddle here: http://jsfiddle.net/cd8G7/ although the Results panel does not show what I actually see when I view the page in browser-, I get a canvas with all the images displayed, and a paragraph under the canvas shows the text from the first element of my "tips" array.

Edit 01/23/2013 @ 13: 50

Here is my isClickOnImage function:

 function isClickOnImage(event){ var clickX = event.clientX; var clickY = event.clientY; //var imageCheckIteration = 0; while(imageCheckIteration < sources.length){ if((clickX > sources[imageCheckIteration].x && clickX < sources[imageCheckIteration].x + imageWidth) && (clickY > sources[imageCheckIteration].y && clickY < sources[imageCheckIteration].y + imageHeight)){ /*This is where I need to print the variable that holds the text I want to display, but I need to display its contents outside the canvas, in the <p></p> tags below. */ console.log("Click on image detected"); document.getElementById("tipsParagraph").innerHTML = sources[imageCheckIteration].data-tip /*tips[imageCheckIteration]*/; } else { document.getElementById("tipsParagraph").innerHTML = ""; } } } 

What I intended to do with this function is to capture the X & Y coordinates of any click on the canvas, and save them in the variables "clickX" and "clickY". Then I have a variable called "imageCheckIteration" that was initialized to 0, and although this variable is less than the length of my "sources" array (which is the array in which all the images were saved), the function should check if there was a click on the canvas area that is covered by one of the images in the array.

If so, then the message “click on image detected” and the line should be displayed in the console log

 document.getElementById("tipsParagraph").innerHTML = sources[imageCheckIteration].data-tip; 

should set the value of "tipsParagraph" equal to the value of the "data-tip" attribute of that image, which is located in the "imageCheckIteration" position of the "sources" array. If a click was detected in the canvas area on which the image is not displayed, then there should be nothing in the "tipsParagraph" value.

However, for some reason, when I view a page in a browser, “tipsParagraph” displays the text “This is where the text will be displayed”, which is its default value, so this is normal. But when I click on an image or click somewhere else on the canvas, the text displayed in "tipsParagraph" does not update.

I can’t understand why this is- can point me in the right direction? Does this mean that my function isClickOnImage(event) never called?

Answer 1

I simplified the way to get a link to an image through the canvas. The trick here is to swap the z-index of the canvas and image container and grab the link to the image in the mouse event. I don’t know how to get the elements behind the canvas, so there’s a workaround.

 $('canvas').bind('mousedown', function(e) { $('section').css('z-index', 4); }); $('img').bind('mouseup', function(e) { $('#tipsParagraph').text($(this).attr('id') + ":" + $(this).attr('alt')); $('section').css('z-index', 2); }); 

The second part here is capturing some attributes from the image itself and updating the text inside your div.

Here you can see more.