JavaScript，使用函数更改HTML中显示的文本 <p> 标签

Question

I have a HTML5 canvas, which is displaying a number of images and a paragraph of text on the page underneath the canvas. I want the text in the paragraph to be updated to display a different element from a JS array depending on which image the user clicks on.

Currently, I 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 line var id = shape.id to update the ID that's being passed to the function, so that it will get the correct element from my 'tips' array, but for some reason, when I view the page in the browser, and click on an image, the text beneath the canvas is not updated. It seems that this function is not updating the 'id' variable to the ID of whichever image has been clicked.

After looking into this, it seems to me that I will want to use a loop inside the 'mousedown' function, that will take the 'id' of the image on which the click has been detected, and loop through my 'sources' array (which is where all of the images have been loaded from the HTML into the JS), checking at each position whether the image stored at that location has the same ID as that of the image that has been clicked on. If it does, the loop should set the text to the text stored at that position of the array, and if not, it should continue looking through the array until it find it. Would this make sense? I tried adding the following code to the 'mousedown' function, but it doesn't 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'm missing from the loop?

The code for the whole 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 11/01/2013 @ 16:10

The code for selectTip is:

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

and I've put a jsFiddle up here: http://jsfiddle.net/cd8G7/ although the 'result' panel is not showing what I actually see when I view the page in my browser- I get the canvas with all of the images displayed, and the paragraph underneath the canvas shows the text from the first element of my 'tips' array.

Edit 23/01/2013 @ 13:50

Here's 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 that this function do is, capture the X & Y coordinates of any click on the canvas, and store them in the variables "clickX" and "clickY". Then, I have a variable called "imageCheckIteration" that has been initialised to 0, and while this variable is less than the length of my "sources" array (which is the array where all of the images have been stored), the function should check whether the click was on an area of the canvas that is covered by one of the images in the array.

If it was, then a console log should display the message "click on image detected", and the line

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

should set the value of the "tipsParagraph" to be the value of the 'data-tip' attribute of whichever image is at the 'imageCheckIteration' position of the 'sources' array. If the click was detected on an area of the canvas that does not have an image displayed, then the value of the "tipsParagraph" should be set to hold nothing.

However, for some reason, when I view the page in the browser, the 'tipsParagraph' displays the text "This is where the text will be displayed", which is its default value, so that's fine. But, when I click on an image, or click anywhere else on the canvas, the text displayed in the 'tipsParagraph' is not updated.

I can't figure out why this is- can someone point me in the right direction? Does it mean that my isClickOnImage(event) function is never being called?

Answer 1

I simplified the way you are getting a reference to an image through the canvas. The trick here is to swap the z-index of the canvas and the image container and grab the reference to the image on the mouse up event. I don't know of a clean way to get elements behind a canvas, hence the 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 portion here is grabbing some attributes from the image itself and updating the text inside your div.

You can see more of the solution here .