Javascript - onClick event

Question

So I currently have an image on a canvas and I want the page to reload once you click the image. The problem is that the page is reloading as soon as the "Go" function is called and not when the click event is initiated. Here is the bit of code.

function Go()
{
    myimage = new Image();
    myimage.src = "http://i.imgur.com/xcLDp.gif";

    ctx.drawImage(myimage, 294, 100);

    myimage.onClick = window.location.reload();
}

I feel like I'm missing something trivial, any help would be appreciated.

Thanks.

Regards,

Matt

Edit: Added for Derek.

Hey Derek I really appreciate the help. I'm going to be real noob with you for a second as I'm pretty new to coding. So I'm trying to implement the demo code you've shown me on my test website here but the error I get back is "Uncaught ReferenceError: $ is not defined".

Now what I know is that "$" is a jQuery symbol, now I'm pretty new to coding/javascript in general so just imagine how new I am to javascript libraries (jQuery).

I've downloaded jQuery and put it in the same directory then added this line to the html:

<script src="jquery-1.7.2.js" type="text/javascript"></script>

Am I doing something wrong? Why is it not picking up on the jquery library?

The image has not even been appended to anywhere in the DOM, how can you click it?? — Derek 朕會功夫
– Derek 朕會功夫, Commented May 30, 2012 at 2:58

Derek 朕會功夫 · Accepted Answer · 2012-05-30 03:27:41Z

3

The "reloading" is actually an illusion. When you do

myimage.onClick = window.location.reload();

That reload() is excuted right away.

What you really intended to do is:

myimage.onClick = window.location.reload;

But why it is an illusion? Because you can't even click the image, since it is nowhere in DOM. The image is in your <canvas>, therefore it should be:

document.querySelector("canvas").addEventListener("click",function(){
    location.reload();
});

Also you will have to calculate if the pointer is above the image. See demo.

DEMO: http://jsfiddle.net/DerekL/QuAVc/

edited May 30, 2012 at 3:27

answered May 30, 2012 at 3:00

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yevgeny Simkin Over a year ago

yeah, it's not immediately obvious (going by the other answers) that that you can't attach a listener to a bunch of pixels, which is what the image winds up being when all is said and done.

Matt Over a year ago

Thank you very much! This works although it means that anywhere you click on the canvas will cause a refresh, is there a way to specifically target the image on the canvas?

Derek 朕會功夫 Over a year ago

Yes, you can test if the cursor's coordinate is inside the area of the image.

Matt Over a year ago

@Derek I've edited my original post with a reply directed to you regarding the demo you've just shown me. I didn't have enough space to fit it all in a comment.

Derek 朕會功夫 Over a year ago

@Matt - You have to flip the order of your 2 scripts, which means jquery-1.7.2.js will have to come first. (Always put your scripts after loading the libraries)

xdazz · Accepted Answer · 2012-05-30 03:14:04Z

3

That is because you called reload immediately by ().

myimage.onClick = window.location.reload;

Edit: And you can't get a click event fired on the image, you should bind to a existing dom element like:

myimage.onload = function(){
  document.querySelector("canvas").addEventListener("click", window.location.reload);
};

edited May 30, 2012 at 3:14

answered May 30, 2012 at 2:57

xdazz

161k38 gold badges255 silver badges278 bronze badges

1 Comment

Yevgeny Simkin Over a year ago

you're correct about how to append a listener to something, but notice that this listener can't get invoked in the current code since the image is never being added to the document.

Someth Victory · Accepted Answer · 2012-05-30 03:01:17Z

0

Yes, sure you are miss something, you must pass window.location.reload as a callback(do not put parenthess), try this:

function Go() {
  myimage = new Image();
  myimage.src = "http://joinmissinglink.com/wp-content/uploads/2012/01/go-button5.jpg";

  ctx.drawImage(myimage, 294, 100);

  myimage.onClick = window.location.reload; //window.location.reload is a callback
}

answered May 30, 2012 at 3:01

Someth Victory

4,5592 gold badges26 silver badges27 bronze badges

Collectives™ on Stack Overflow

Javascript - onClick event

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related