0

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.

5 Answers 5

0

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.1 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

1 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.

3
  • Thanks so much! This seems to be doing what I need! The only thing that was incorrect was you were missing the closing parenthesis after actionCards[i]. This should definitely get me moving in the right direction. Thanks again! I really appreciate it. Jan 12, 2013 at 3:30
  • @Lance: You're welcome! I fixed the missing closing parenthesis in my answer. I'm not sure if you know this already or not, but if this answered your question, you should tick the checkmark next to it (after the time limit has expired; I think that'll be a few minutes from now).
    – icktoofay
    Jan 12, 2013 at 3:32
  • I was about to ask how I could mark it as the answer. I'll be sure to do that. Jan 12, 2013 at 3:34
0

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.

1
  • Yeah. I was trying to access the image property of my card object...I had a feeling that was what was happening (as stated in my question). I just wasn't sure how to fix it. Jan 12, 2013 at 3:27
0

Change fullImage(this.image) to fullImage(this.src) to get the source.

0

on modern browsers do this: card.addEventListener('click', fullImage.bind(actionCards[i]), false);

0

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

2
  • card.src, of course, would need to be escaped properly for a string literal. JSON.stringify could do this for you.
    – icktoofay
    Jan 12, 2013 at 3:38
  • Sure, but it's a good idea to deal with special characters like embedded quotes and backslashes.
    – icktoofay
    Jan 12, 2013 at 3:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.