Problems with Making a Mini Card Game

Question

So I'm trying to make a mini Uno game in one of my passages using Javascript, but since I'm pretty much a beginner I've encountered a few problems with the code. Here's what I have so far for HTML:

<img src="images/uno/back-card.png" class="uno" id="back-card" onclick="drawCard()" alt="Draw Pile" title="Draw Card">

<img class="uno" id="table-card" src="images/blank.png" alt="Table Card" title="Table Card">

And Javascript:

window.onload = tableCard;

var cards = ["images/uno/back-card.png", "images/uno/blue-5.png", "images/uno/blue-7.png", "images/uno/blue-9.png", "images/uno/blue-plus2.png", "images/uno/blue-skip.png", "images/uno/green-1.png", "images/uno/green-3.png", "images/uno/green-4.png", "images/uno/green-6.png", "images/uno/green-skip.png", "images/uno/red-0.png", "images/uno/red-1.png", "images/uno/red-2.png", "images/uno/red-3.png", "images/uno/red-skip.png", "images/uno/red-0.png", "images/uno/yellow-2.png", "images/uno/yellow-5.png", "images/uno/yellow-8.png", "images/uno/yellow-9.png", "images/uno/yellow-plus2.png", "images/uno/plus4.png", "images/uno/wild.png"];

var b5 = document.querySelectorAll("#blue", "#five");
var b7 = document.querySelectorAll("#blue", "#seven");
var b9 = document.querySelectorAll("#blue", "#nine");
var b2p = document.querySelectorAll("#blue", "#plus-two");
var bs = document.querySelectorAll("#blue", "#skip");
var g4 = document.querySelectorAll("#green", "#four");
var g6 = document.querySelectorAll("#green", "#six");
var gs = document.querySelectorAll("#green", "#skip");
var r0 = document.querySelectorAll("#red", "#zero");
var r1 = document.querySelectorAll("#red", "#one");
var r2 = document.querySelectorAll("#red", "#two");
var r3 = document.querySelectorAll("#red", "#three");
var rs = document.querySelectorAll("#red", "#skip");
var y2 = document.querySelectorAll("#yellow", "#two");
var y5 = document.querySelectorAll("#yellow", "#five");
var y8 = document.querySelectorAll("#yellow", "#eight");
var y9 = document.querySelectorAll("#yellow", "#nine");
var y2p = document.querySelectorAll("#yellow", "#plus-two");
var w = document.getElementById("wild");
var p4 = document.getElementById("four-plus");
var bc = document.getElementById("back-card");
var tb = document.getElementById("table-card");

function tableCard() {
	var num = Math.floor(Math.random() * (tableCard.length+1)); // 0...6;
	document.getElementById("table-card") = cards[num];
}

function drawCard() {
	alert("hi");
}

I'm trying to make the 'table-card' image to display a random card image from the array, but it doesn't seem to display anything. And when I click on the 'back-card' image it says that the function 'drawCard' is undefined (the alert in the function is for testing purposes).

Answer 1

The passage isn't rendered at the time the window.onload event triggers.  To trigger the image to be updated when the passage is rendered you'll want to put code in your passage like this:

<<script>>
	$(document).one(":passagerender", function (ev) {
		var num = Math.floor(Math.random() * (setup.tableCard.length+1));
		$(ev.content).find("#table-card").attr("src", setup.cards[num]);
	});
<</script>>

That uses the jQuery .attr() method to set the source of the "table-card" image.

Also, to avoid any possible scope problems (problems where something is defined in one location, but not the location you're currently working in), you should also move your "cards" variable onto the setup object in your JavaScript section like this:

setup.cards = ["images/uno/back-card.png", "images/uno/blue-5.png",
	"images/uno/blue-7.png", "images/uno/blue-9.png",
	"images/uno/blue-plus2.png", "images/uno/blue-skip.png",
	"images/uno/green-1.png", "images/uno/green-3.png",
	"images/uno/green-4.png", "images/uno/green-6.png",
	"images/uno/green-skip.png", "images/uno/red-0.png",
	"images/uno/red-1.png", "images/uno/red-2.png",
	"images/uno/red-3.png", "images/uno/red-skip.png",
	"images/uno/red-0.png", "images/uno/yellow-2.png",
	"images/uno/yellow-5.png", "images/uno/yellow-8.png",
	"images/uno/yellow-9.png", "images/uno/yellow-plus2.png",
	"images/uno/plus4.png", "images/uno/wild.png"];

A scope problem is also why you're having trouble calling your drawCard() function.  Rewrite it like this and it will have a global scope:

window.drawCard = function () {
	alert("hi");
};

Alternately, you could put it on the setup object, which also has global scope, like this:

setup.drawCard = function () {
	alert("hi");
};

though in this case you'd have to call that using "setup.drawCard()", instead of just "drawCard()" like you would if you put it on the window object.

Hope that helps!  :-)