Jackpot 14

[Ryan O'Neill]

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.

cards = new Array();
theArray = new Array();
var a;
var b;
//var click = document.getElementsByTagName("img");

for (i = 1; i < 14; i++) {
		document.getElementById("c"+ i );
		cardSrc = "c" + i + ".png";
		imgTag = "<img src='cards/" + cardSrc + "'>";
		cards.push(imgTag);
	}

	for (i = 1; i < 14; i++) {
		document.getElementById("d"+ i );
		cardSrc = "d" + i + ".png";
		imgTag = "<img src='cards/" + cardSrc + "'>";
		cards.push(imgTag);
	}

	for (i = 1; i < 14; i++) {
		document.getElementById("h"+ i );
		cardSrc = "h" + i + ".png";
		imgTag = "<img src='cards/" + cardSrc + "'>";
		cards.push(imgTag);
	}

	for (i = 1; i < 14; i++) {
		document.getElementById("s"+ i );
		cardSrc = "s" + i + ".png";
		imgTag = "<img src='cards/" + cardSrc + "'>";
		cards.push(imgTag);
	}

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

window.onload = function(){
	document.write("<h1> Jackpot 14! </h1>");
	shuffle(cards);
	popbBackCards();
	createTable(); 
	
	var gCount = 0;
	var count = 0; 
	var click = document.getElementsByTagName("img");
	window.onclick = function(){
		for (var i=0; i < 52; i++){
		click[i].onclick = function (){ //start of for loop. 		
				if(this.id > 0 < 53){
					removeTbl('tbl');    
					var x = this.id;
					bBackCards[x] = cards[x];
					createTable();
					theArray.push(x);
					//alert(theArray[0]);
					count+= 1;
				}
				if(count%2 == 0){
					removeTbl('tbl');  
					var x = this.id;
					bBackCards[x] = cards[x];
					createTable();
					theArray.push(x);  
					count++;
					//alert(theArray[0]+ " "+ theArray[1]);
					var a = cards[theArray[0]];
					var b = cards[theArray[1]];
					alert(a+b);
					if(addition(a,b)){
						gCount +=2;
						count = 0;
						alert(theArray[0]+ " "+ theArray[1]);
						cards[a] = "";
						cards[b] = "";
						removeTbl('tbl'); 
						createTable();
						theArray.pop();
						theArray.pop();
						theArray.pop();
					}else
						bBackCards[a].src = "<img src='cards/bback-tall.png' id ="+a+" >";
						bBackCards[b].src = "<img src='cards/bback-tall.png' id ="+b+" >";
						theArray.pop();
						theArray.pop();
						theArray.pop();
						removeTbl('tbl'); 
						createTable();
				}
			}
		}
	}
}


function printC(array){
	array = new Array();
	for(i =0; i < cards.length; i++){
		//document.write("<br>"+array[i+0])
		array.push("<br>" + cards[i+0]);
	}
		//document.write(array[i]);
		return array;     
} 

function popbBackCards(){
		bBackCards = new Array();
		for(j = 0; j < cards.length; j++){
				imgTag = "<img src='cards/bback-tall.png' id ="+j+" >";
				bBackCards.push(imgTag);
			}	
				return bBackCards;
		}
		
function addition(str1, str2){
		var reg = (/cards\/[cdhs](\d{1,2})\.png/);
		var str1e = str1.match(reg);
		var str2e = str2.match(reg);
		var a1 = str1e.length -1;
		var a2 = str2e.length -1;
		var x = str1e[a1];
		x = parseInt(x);
		var y = str2e[a2];
		y = parseInt(y);
		var z = x+y;
		if(z == 14 ){
			document.writeln("true");
			return true;
		}else
			document.writeln("false");
			return false; 
	} 
	
function createTable() {
	document.write('<table id ="tbl">');
	//takes the array and puts it into a table
	for (var i = 0; i < cards.length; i++) {
		if (i!=0&&i%13==0){
			document.write('<tr></tr>');
			document.write('<td>' + bBackCards[i] + '</td>');
		}else
			document.write('<td>' + bBackCards[i] + '</td>');
	}
}

function removeTbl(id){
	var t = document.getElementById(id);
	t.parentNode.removeChild(t);
}

// these methods are to handle the buttons
document.getElementById('btn').onclick = function() {
    alert('click!')
	shuffle(cards);	//supposed to reset deck
    }
   // supposed to shuffle the deck
document.getElementById('btn2').onclick = function() {
    alert('click!')
    shuffle(cards);
    }
	

[Bear Bibeault]

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]

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]

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.

addition(string, string);

isAddT(string, string);

[Bear Bibeault]

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.

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. 

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]

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]

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.

function cardsImage(){
	var gCount = 0;
	var count = 0; 
	//var cardsImage = document.getElementsByTagName("img");
	for (var i=0; i < 52; i++){
	var cardsImage = document.getElementsByTagName("img");
	cardsImage[i].onclick = function (){ 	
			removeTbl('tbl');    
			var x = this.id;
			bBackCards[x] = cards[x];
			createTable();
			theArray.push(x);
			count+=1;
			alert("U made it");
			if(count%2 == 0){
				cardsImage[i].onclick;
				removeTbl('tbl');  
				alert("U made    it");
				var x = this.id;
				bBackCards[x] = cards[x];
				createTable();
				theArray.push(x);  
				count+=1;
				alert(theArray[0]+ " "+ theArray[1]);
				var a = cards[theArray[0]];
				var b = cards[theArray[1]];
				alert(a+b);
				if(isAddTrue(a,b)){
					gCount +=2;
					count = 0;
					alert(theArray[0]+ " "+ theArray[1]);
					cards[a] = "";
					cards[b] = "";
					bBackCards[a] = "";
					bBackCards[b] = "";
					removeTbl('tbl'); 
					createTable();
					theArray.pop();
					theArray.pop();
				}else
					bBackCards[a] = "<img src='cards/bback-tall.png' id ="+a+" >";
					bBackCards[b] = "<img src='cards/bback-tall.png' id ="+b+" >";
					theArray.pop();
					theArray.pop();
					removeTbl('tbl'); 
					createTable();
			}
		}  
	}
}

[Peer Reynders]

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):
function cardsImage(){ var gCount = 0, count = 0, cardsImage, // why are we shadowing the function name (JavaScript functions can be recursive, i.e. call themselves)? Bad Idea. i; function eventListener () { var x = this.id, a,b; removeTbl('tbl'); // global? Be consistent with your quotes - personally I use single in JS and double in HTML bBackCards[x] = cards[x]; // global? createTable(); // global? theArray.push(x); // global? count += 1; alert("U made it"); if(count%2 == 0){ cardsImage[i].onclick; // OK what is going on here ??? no handler being set // also "i" is part of the closure. By the time this runs it's probably 53. removeTbl('tbl'); // didn't we already do this? alert("U made it"); // var x = this.id; // why is this even here? bBackCards[x] = cards[x]; // didn't we already do this? createTable(); // didn't we already do this? theArray.push(x); // didn't we already do this? count+=1; // didn't we already do this? alert(theArray[0]+ " "+ theArray[1]); a = cards[theArray[0]]; // global? b = cards[theArray[1]]; alert(a+b); if(isAddTrue(a,b)){ gCount +=2; count = 0; alert(theArray[0]+ " "+ theArray[1]); cards[a] = ""; cards[b] = ""; bBackCards[a] = ""; bBackCards[b] = ""; removeTbl('tbl'); createTable(); theArray.pop(); theArray.pop(); } else { bBackCards[a] = "<img src='cards/bback-tall.png' id ="+a+" >"; // consider a function using document.createElement https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement bBackCards[b] = "<img src='cards/bback-tall.png' id ="+b+" >"; // -- or hiding alternates (or swapping existing elements in and out of the DOM tree) theArray.pop(); theArray.pop(); removeTbl('tbl'); createTable(); } } } for (i = 0; i < 52; i++){ cardsImage = document.getElementsByTagName("img"); // why are we calling this 52 times cardsImage[i].onclick = eventListener; } }
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]

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.

cards = new Array();
theArray = new Array();
var count; 
var id;
var id1;
var id2;



function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

window.onload = function(){
	document.write("<h1> Jackpot 14! </h1>");
	document.write("<p> Match cards that sum to 14</>");
	//shuffle(cards);
	//populateFullMode();
	populateLiteMode();
	popbBackCards();
	createTable(); 
	count =0;
	gameCount = 0;
    window.onclick = function(e){
        var id = e.target.getAttribute("id");
        if(id < 53){
            removeTbl('tbl');      
            bBackCards[id] = cards[id];
            theArray.push(id);
            count+=1;
            createTable();
            var id1 = theArray[0];
        }
            if(count%2 ==0 ){
				var id2 = theArray[1];
				if(isAddTrue(cards[id1],cards[id2])){ 
					removeTbl('tbl');
                    gameCount +=2;
					cards[id1] = "";
                    cards[id2] = "";
					bBackCards[id1] = "";
                    bBackCards[id2] = "";
                    theArray.pop();
                    theArray.pop();
					createTable();
					count = 0;
				}else if(count > 1){
					alert("The count is" + count);
					bBackCards[id1] = "<img src='cards/bback-tall.png' id ="+id1+" >";
					bBackCards[id2] = "<img src='cards/bback-tall.png' id ="+id2+" >";
					theArray.pop();
					theArray.pop();	
					removeTbl('tbl'); 					
					createTable();
					count=0;
				}
					
                }
			}
		} 

function popbBackCards(){
		bBackCards = new Array();
		for(j = 0; j < cards.length; j++){
				imgTag = "<img src='cards/bback-tall.png' id ="+j+" >";
				bBackCards.push(imgTag);
			}	
				return bBackCards;
		}
		
function isAddTrue(str1, str2){
	var reg = (/cards\/[cdhs](\d{1,2})\.png/);
	var str1e = str1.match(reg);
	var str2e = str2.match(reg);
	var a1 = str1e.length -1;
	var a2 = str2e.length -1;
	var x = str1e[a1];
	x = parseInt(x);
	var y = str2e[a2];
	y = parseInt(y);
	var z = x+y;
		if(z == 14 ){
			//document.writeln("true");
			return true;
		}else
			//document.writeln("false");
			return false; 
} 
	
function createTable() {
	document.write('<table id ="tbl">');
	//takes the array and puts it into a table
	for (var i = 0; i < cards.length; i++) {
		if (i!=0&&i%13==0){
			document.write('<tr></tr>');
			document.write('<td>' + bBackCards[i] + '</td>');
		}else
			document.write('<td>' + bBackCards[i] + '</td>');
	}
}
	
function removeTbl(id){
	var t = document.getElementById(id);
	t.parentNode.removeChild(t);
}

function populateLiteMode(){
	for (i = 1; i < 14; i++) {
		cardSrc = "s" + i + ".png";
		imgTag = "<img src='cards/" + cardSrc + "'>";
		cards.push(imgTag);
	}
}

function populateFullMode(){
	for (i = 1; i < 14; i++) {
		cardSrc = "c" + i + ".png";
		imgTag = "<img src='cards/" + cardSrc + "'>";   
		cards.push(imgTag);
	}

	for (i = 1; i < 14; i++) {
		cardSrc = "d" + i + ".png";
		imgTag = "<img src='cards/" + cardSrc + "'>";
		cards.push(imgTag);
	}

	for (i = 1; i < 14; i++) {
		cardSrc = "h" + i + ".png";
		imgTag = "<img src='cards/" + cardSrc + "'>";
		cards.push(imgTag);
	}

	for (i = 1; i < 14; i++) {
		cardSrc = "s" + i + ".png";
		imgTag = "<img src='cards/" + cardSrc + "'>";
		cards.push(imgTag);
	}
}


// these methods are to handle the buttons
document.getElementById('btn').onclick = function() {
    alert('click!')
	shuffle(cards);	//supposed to reset deck
    }
   // supposed to shuffle the deck
document.getElementById('btn2').onclick = function() {
    alert('click!')
    shuffle(cards);
    }
	
document.getElementById('btn3').onclick = function() {
    alert('click!')
    //supposed to have lite deck 
    }

[Paul Clapham]

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?

if(isAddTrue(cards[id1],cards[id2])){ removeTbl('tbl'); gameCount +=2; cards[id1] = ""; cards[id2] = ""; bBackCards[id1] = ""; bBackCards[id2] = ""; theArray.pop(); theArray.pop(); createTable(); count = 0;

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]

Line 43 is what flips the card that is why I don't understand why it doesn't work.

bBackCards[id] = cards[id];

[Peer Reynders]

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]

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]

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]

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