Passing a Javascript object property to a function with onclick

Question

so I'm working on recreating the card game Dominion in Javascript. I'm using OO Javascript, creating a card object for each card.

Rather than posting all my code here I'll save some space and link you to it:

Site: http://people.rit.edu/lxl1500/Prog4/Project%201/project1.html

Script: http://people.rit.edu/lxl1500/Prog4/Project%201/main-script.js

Where I'm running into issues:

In my createActions() function I'm adding an onclick event to each image (I'm creating the images by grabbing the smallImage property of each object). This onclick should call my fullImage() function. This function will simply show a larger version of the card so the player can see the details. Therefore, I want to pass the image property, which holds the string for the source of the larger image to the function.

fullImage() will accept the object property as imageSrc. You'll see now by clicking on an image you'll get an alert of undefined. The only thing I can think of is when I'm calling fullImage(this.image) - this is reference to the image itself rather than the object...I'm not sure how to accomplish what I'm trying to do though. Any help would be greatly appreciated!

Thank you for your time.

Answer 1

You're setting onclick as an attribute. You might be able to work with that somehow, but it's a much more elegant solution to attach an event listener:

card.addEventListener('click', function() {
    // Handle click.
}, false);

Then you can use actionCards[i] as normal... except you can't, because i will be one over the last index, for reasons I won't get into here. ¹ The easiest way to fix that is to bind the function before you add it as an event listener:

card.addEventListener('click', function() {
    // Handle click.
}.bind(actionCards[i]), false);

(I should note that bind is not built-in in some older browsers. While I'm on the topic of browser compatibility, addEventListener isn't supported by old versions of Internet Explorer, either.) Then you can use this to refer to your Card object.

---

Footnotes

¹ Okay, fine. It's because of JavaScript's function scope and that when the user has clicked it, the loop has finished, and when the loop has finished, i will be one over the number of cards.

Answer 2

not sure why you have this.image. image isn't a property of an image element. remember a onClick event handler will be called with this scope set to the element the onclick was happen. change it to just fullimage(this) and you'll see the img element is passed in, you could then change your fullimage method to imageSrc.src = 'some url'; to change the image src attribute.

Answer 3

将fullImage(this.image)更改为fullImage(this.src)以获取源。

Answer 4

在现代浏览器上，请执行以下操作：card.addEventListener（'click'，fullImage.bind（actionCards [i]），false）;

Answer 5

Yes, you're correct that the this.src reference isn't pointing to what you want it. When the Image card gets clicked, it runs the javascript

fullImage(this.image)

Since this javascript isn't run with any connection to the img that called it, Javascript won't know which image called it. One fix to this is hard-coding the correct src url into the function call when you set the properties for the card, so this:

card.setAttribute("onClick","fullImage(this.image)");

becomes this:

card.setAttribute("onClick","fullImage('" + card.src + "')");

This way the card's src is resolved before the function call is made, and when the function is called it knows which src to echo.

Hope this helps!

edited to include quotes