www.webdeveloper.com
Results 1 to 5 of 5

Thread: Using an event, triggered on the HTML5 canvas, to change the text in HTML paragraph

  1. #1
    Join Date
    Apr 2012
    Posts
    16

    Using an event, triggered on the HTML5 canvas, to change the text in HTML paragraph

    I have a web page which is displaying a number of images on the HTML5 canvas. It is possible to drag and drop most of these images around the canvas- a feature I added using the KineticJS library. I am however, using a copy of the KineticJS library that I've downloaded and saved locally, as I wanted to make one or two changes to it- the main one being that when a 'mousedown' was detected on an image, originally, anything that hadn't been drawn to the canvas using the library was cleared from it, and I had a few things on the canvas, that weren't drawn by the library that I didn't want to lose.

    I now want to add a feature, so that whenever a 'mousedown' is detected on one of the images displayed on the canvas, a textual description of that image will be displayed on the page, outside the canvas area, in some <p></p> tags.

    I have two arrays- one which contains all of the images that are being drawn to the canvas, and another, each element of which contains the text corresponding to a single image from the first array.

    I have the following JS function:

    Code:
    	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. */
    				document.getElementById("tipsParagraph").innerHTML = tips[imageCheckIteration];
    			}
    		}
    	}
    which I intended would update the contents of the "tipsParagraph" (which is the ID I've given to the <p> tag whose contents I want to update) to whatever text from the 'tips' array corresponded to the image that the click had been detected on.

    But, for some reason, this function doesn't seem to work- when I click on an image on the canvas, although I am still able to drag and drop it around the canvas, the text in the paragraph below the canvas never changes. Can anyone point me in the right direction here?

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    You probably need to check first whether the function is handling the event or not:

    function isClickOnImage(event){
    alert('image clicked')';
    }

    Once you succeed then the next step is to verify the event object is properly defined.

    function isClickOnImage(e){
    var e=window.event || e; //IE event handlers do not take the event object as an argument
    var clickX = e.clientX;
    var clickY = e.clientY;
    }

    Once you go pass those 2 steps, it's just a matter of making sure all other objects and variables in your function are valid. Use your web browser's JavaScript console to help you find the source of errors.

  3. #3
    Join Date
    Apr 2012
    Posts
    16
    Hi,

    I added a
    Code:
    console.log
    line into my while loop, to check whether a click on an image is being detected:

    Code:
    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 = "";
    			}
    		}
    But, it appears that this code is never being called, since when I click on an image, the message is not displayed in the console. When I 'mousedown' on an image, I am able to drag and drop it around the canvas (I added this functionality using a local copy of the KineticJS library). Maybe I need to add this code to the 'mousedown' function from the library? Or is there something else I'm doing wrong here?

  4. #4
    Join Date
    Apr 2012
    Posts
    16
    Actually, just looking at my code, I have declared the function to check if the click is on an image like this:

    Code:
    	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 = "";
    			}
    		}
    	}
    and then, when I call it in my local copy of kineticJS, I call it using the line

    Code:
    isClickOnImage(evt);
    in the mousedown function... I've just noticed that the parameters are different in the definition and the call (i.e. "event" or "evt"), does this matter? Should they be the same? If so, which should they be? Or is there something else completely that I've missed here?

  5. #5
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    However you name the parameter in the function signature (e.g. function isClickOnImage(event) ) you should use that very same name in the function's body.
    Because "event" is used by IE (window.event), I prefer to use a different name to avoid any confusion.

    function isClickOnImage(evt) or function isClickOnImage(e) are just some forms I used from time to time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles