JavaScript函数显然没有被调用

Question

I have a web page with an HTML5 canvas that is displaying a number of images. I have made it possible to drag and drop the images around the canvas by using the kineticJS library.

However, I am using a copy of the library that I have downloaded and saved locally, since there were one or two changes that I wanted to make to its functionality. (For example, before I had altered it, when a click was detected on an image on the canvas, anything that had previously been drawn to the canvas by anything other than the Kinetic library would be cleared from the canvas. I removed this call to clear(), since there were a few other things that I had drawn to the canvas which I wanted to remain there.)

Now, I want to add some functionality to my code, so that when a click is detected on one of the images that has been drawn to the canvas, a textual description of the image that has been clicked will appear on the the web page outside the canvas.

I have the following function, which I am using to detect whether a click has been detected on one of the images:

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 = tips[imageCheckIteration];
        } else {
            document.getElementById("tipsParagraph").innerHTML = "";
        }
    }
}

The images displayed on the canvas are all stored in an array called 'sources'. So, the while loop in this section of my code should check whether the x & y coordinates of the click were in a location that has an image drawn to it, starting with the first image in the array, and going all the way through to the last.

If the loop determines that a click was in a position that has an image drawn to it, then the console should log the message "Click on image detected", and the value of my tipsParagraph variable should be updated to the value of whatever is stored in the 'tips' array, at the same position as that of the image that's been clicked on in the images array (the images array has been called 'sources'). (The text stored in each position of the 'tips' array corresponds to the image at the same position in the 'sources' array).

As I said previously, I am using a local copy of the KineticJS library, and I've edited its 'mousedown' function so that it now 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);
    }

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

ie I've added a call to my isClickOnImage function.

However, when I click on an image on the canvas, the text in the 'tipsParagraph' section of my page is not updated. The 'tipsParagraph' is simply the ID I've given to a <p> tag displayed below the canvas.

This is the line of code I have for the 'tipsParagraph':

<p id = "tipsParagraph">This is where the text will be displayed. <script>$('#tipsParagraph').text(tips[imageCheckIteration]);</script></p>

I assumed that the JS I've added to this line would ensure that the text displayed is the text from the tips array, at whatever position the value of the variable imageCheckIteration determines. However, for some reason, the tip being displayed on my page is always the first element from the tips array. This is the element displayed as soon as the page loads (ie before a click on an image), and it does not change when a click on an image is detected. So it seems to me that my isClickOnImage function is never being called by the mousedown function in the library, but rather that the value of the tipsParagraph is being set straight away when the page loads, and not being changed after that, regardless of user interaction with the page...

Can anyone point out to my why this is? What is it I'm doing wrong, and what do I need to do to get the text displayed to be the text corresponding to the image that the user clicks on?

Answer 1

Taking a look at

function isClickOnImage(event){
 var clickX = event.clientX;
 var clickY = event.clientY;

 //var imageCheckIteration = 0;  // <-- why is this 0 commented out?
 while(imageCheckIteration < sources.length){ // <-- imageCheckIteration is never incremented, so it never increases, hence the check never occurs
    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 = tips[imageCheckIteration];
    } else {
        document.getElementById("tipsParagraph").innerHTML = "";
    }
 }
}

try something like: the for loop structure to control incrementing:

for( var i=0; i<sources.length; i++){ // this will go through all items in the sources array
    if((clickX > sources[i].x ... ) //and other checks
}