• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Jackpot 14

 
Ranch Hand
Posts: 86
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Ok I am trying to make a game that displays 52 cards in full mode or 13 in lite mode click them and check to see if their sum is equal to 14. Right now I have the cards displaying and clicking, but it makes me click twice to flip a card. I know it has something to do with lines 63 & 65, and I tried commenting them out or using them differently, but I can't get it to work properly. Any help would be appreciated.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That's a fair amount of code, but here are some initial observations:

Firstly, are you sure that document.write is really what you want to be using? It will overwrite your document once loaded. From MDN:

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.



Likely, you want to manipulate the DOM rather than rewrite the document.

jQuery makes that a lot easier than the native DOM API, but you may not be able to use that for this assignment (it is an assignment, right?)

Secondly, the reason for the double click needed is that you aren't setting up the click handler for the images until a window click hander is executed. Why? I'm having a hard time figuring out what you are trying to accomplish with that.

More in next reply.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Some style observations:

Names matter! You locate an image element in the DOM and store it in a variable named click. That's really confusing later on. It's an image element that represents a card, right? So name it card, or cardImage, or something that represents what it is.

Likewise, you have count and gCount. Each should be more specific as to what is being counted, and avoid abbreviations; what's a "g"? What is count counting?

The function addition returns a Boolean value (true or false) so its name is not wisely chosen. The phrase "is (addition(a,b))" doesn't read well. What exactly does the true/false return signify. Name the functions so that reading the if statement makes sense. Example: if (isAnElephant(whatever))

Your other variable and variable names should receive similar scrutiny.

Congrats on good indentation. That's more important than many people realize. (Though there are a few spots where you were inconsistent.)

Alerts are not good way to debug; especially when dealing with events, as they are blocking. Learn how to use the JavaScript console. See the JavaScript Links FAQ section at the top of this forum to see how to learn about the browser tools that will make this all much easier to figure out.
 
Ryan O'Neill
Ranch Hand
Posts: 86
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Likely, you want to manipulate the DOM rather than rewrite the document.

jQuery makes that a lot easier than the native DOM API, but you may not be able to use that for this assignment (it is an assignment, right?)


It is an assignment, and if jQuery is something that is easy to pickup I would be more than willing to learn it.

Secondly, the reason for the double click needed is that you aren't setting up the click handler for the images until a window click hander is executed. Why? I'm having a hard time figuring out what you are trying to accomplish with that.



Can I just get rid of one or the other? Is there a preferred way to handle a click?

You locate an image element in the DOM and store it in a variable named click. That's really confusing later on. It's an image element that represents a card, right? So name it card, or cardImage, or something that represents what it is.


That is a good point. I'll change it so it is much easier to read for my prof myself and really everyone. Thanks

Count is to count the number of times clicked and gCount is game count, more or less stubs until I get my clicks working more properly.

I have changed my method so that it is isAddT(x,x); which makes much more sense.





 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Ryan O'Neill wrote:
It is an assignment, and if jQuery is something that is easy to pickup I would be more than willing to learn it.


In the professional world, it would be rare for a site to be written without the assist of jQuery or some other library/framework. Dealing with the browsers in native JS is a pain.

If you want to use the native DOM API, that's fine too. Just a bit more abstract and wordy.

Can I just get rid of one or the other? Is there a preferred way to handle a click?


That greatly depends on what is you wan to be clickable. I assume you want to do something with a card when it is clicked. Ergo, you should have a click handler on the cards. I don't know what the purpose of the window-level click handler was supped to be, and I can't think of any possible reason for it.

That is a good point. I'll change it so it is much easier to read for my prof myself and really everyone. Thanks


Especially when you look back at this code later. It's amazing how unreadable code can be when you haven't been looking at it constantly.


clickCount and gameCount would be much better names then.

I have changed my method so that it is isAddT(x,x); which makes much more sense.


Better, but still not great. What is "T"? Avoid needless abbreviations. Whatever T stands for, spell it out!
 
Ryan O'Neill
Ranch Hand
Posts: 86
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

That greatly depends on what is you wan to be clickable. I assume you want to do something with a card when it is clicked. Ergo, you should have a click handler on the cards. I don't know what the purpose of the window-level click handler was supped to be, and I can't think of any possible reason for it.



I took out the window level clicker and now I can only click once. It seems as though it would be something simple, yet I've fiddled with it for a while and can't figure it out.
I can imagine it would be hard to read when looking at it after not seeing it for a while.
I have changed it to isAddTrue, that seems to make the most sense to me.
 
Ryan O'Neill
Ranch Hand
Posts: 86
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Any help with this loop would be a big help. I can't get it to go into the first if. I took the loop out of my window.onload and put it into its own function.

 
Bartender
Posts: 2968
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Ryan O'Neill wrote:Any help with this loop would be a big help. I can't get it to go into the first if.


Well there is no "if" inside the loop. The "if" is part of the click handler that is set by the loop - so the if only gets hit when something is clicked.

An alternate view of your code (after just a quick scan over it):

You really need to follow Bear's advice and look over the "Debugging" section of the Javascript Links (Wiki forum at Coderanch). That way you'll get a better idea of how your code executes.

Use Google Chrome/Chromium if you can:
Chrome DevTools Overview - Google Chrome: Debugging JavaScript
and
Debugging JavaScript - Google Chrome: Debugging with breakpoints

Also you seem to be tackling a lot of things that are new to you at the same time. Maybe step back and see if you can create a number of HTML/CSS/JS mini projects which only deal with one single problem/aspect of the solution at a time so that you can explore each issue in detail and isolation. Once you are sure you know how all the pieces work, start combining the ideas, one at a time.
 
Ryan O'Neill
Ranch Hand
Posts: 86
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I pretty much have the whole game working except I cannot for the life of me figure out why the 2nd card doesn't flip when isAddTrue is true. Thanks for the tip on using developer tools, it makes debugging a whole lot easier.

 
Marshal
Posts: 28177
95
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Ryan O'Neill wrote:I cannot for the life of me figure out why the 2nd card doesn't flip when isAddTrue is true.



That must be this part of the code, right?



I don't know... none of that code looks like it has anything to do with flipping cards. But I don't see any other code using isAddTrue, so could you clarify what you meant by that? Maybe it's just me not seeing the card-flipping code right in front of my face.
 
Ryan O'Neill
Ranch Hand
Posts: 86
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Line 43 is what flips the card that is why I don't understand why it doesn't work.

 
Peer Reynders
Bartender
Posts: 2968
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Ryan O'Neill wrote:I cannot for the life of me figure out why the 2nd card doesn't flip when isAddTrue is true.


Now as I'm not running the code, so I can't say for sure - but are you sure that it isn't simply a matter of not seeing that the card is flipped? You first recreate the table with the second card flipped and then destroy it immediately to create the table with both cards off the table. So the browser may never get around to rendering the table with the second card flipped and immediately goes to rendering the table with the two cards removed.
 
Paul Clapham
Marshal
Posts: 28177
95
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I don't know why it doesn't work either. But then I don't understand why it should work, or even what it is supposed to do. Perhaps it would help if you would walk us through the code and explain in detail what that line of code does, apart from assigning one array entry to another array entry.
 
Ryan O'Neill
Ranch Hand
Posts: 86
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Peer you were correct it isn't that it isn't being shown, it is that the page isn't re rendered. Got it. And Paul what I do is I have an array of facedown cards then I set the value given from the click (the id) to the value in the cards array( the array of cards with values). When I want to flip the card I set it back to the facedown card with the id from the cards array.
 
Peer Reynders
Bartender
Posts: 2968
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You could get the effect that you are looking by wrapping the code in the if(count%2 == 0) block in a function and using setTimeout.
Try this out in a tiny side project first so that you have chance to get a handle on how things work first.

WindowTimers.setTimeout() - Web APIs | MDN
John Resig - How JavaScript Timers Work
Really Understanding Javascript Closures
 
Any sufficiently advanced technology will be used as a cat toy. And this tiny ad contains a very small cat:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic