Ok let me preface this by stating that I know virtually nothing about Javascript - I just completed codeacademy.com course and it has not done nearly enough to teach me.

Onto my program - I am trying to develop the game 1-4, 24 (Here's a video example of the game) using Javascript. For those of you
who do not know the game is a dice game where you roll a total of 6, six-sided dice and try to get the highest number possible, the maximum being 24. You may roll the dice as many times as you like, but each time you roll you must take at least one die. In addition, you need a 1 and a 4 to qualify. The 1 and the 4 do not count to your total score. So, a perfect roll looks like 1, 4, 6, 6, 6, 6... 1 and 4 qualify you. 6 + 6 + 6 + 6 = 24. If you do not qualify you automatically lose the game.

So far in my script I have been able to randomly generate six dice and produce images of those dice. I cannot however, figure out how to make these images 'clickable' so that the player of the game can choose to 'keep' a dice. I have tried using onClick but am either using it incorrectly or it is just the wrong thing to use.

Here's my code so far:

Code:
<html>
<body>

<script>

// Reusable function to display images

function image(src, width, height, hspace, link) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.hspace = hspace;

document.body.appendChild(img);

};


// set diceLeft

diceLeft = 6;

// create an array called rolls

var rolls = [];

// rolls dice based on diceLeft

function rollDice() {

	// rolls the amount of dice left (i.e. 6), then stores dice in rolls
	for (var i = 0; i < diceLeft; i++) {
		rolls[i] = 1 + Math.floor(Math.random() * 6);
			// displays an image based on the die rolls
			switch(rolls[i]) {
			case 1: image("dice-1.png", 100, 100, 5);
			break;
			case 2: image("dice-2.png", 100, 100, 5);
			break;
			case 3: image("dice-3.png", 100, 100, 5);
			break;
			case 4: image("dice-4.png", 100, 100, 5);
			break;
			case 5: image("dice-5.png", 100, 100, 5);
			break;
			case 6: image("dice-6.png", 100, 100, 5);
			break;

			}
		}


}

rollDice();