I've just finished the codeacademy course on javascript so forgive my total lack of knowledge.
I'm attempting to create the classic bar game 1-4-24 (also called past midnight or after midnight) using javascript and html. (Here's a video that shows the game for those of you who don't know what it is.
So far I've created a function that rolls the dice and stores them in an array. In a previous version of this code I was able to appendChild(img) those results in image form to the body of the page. However, I needed to be able to remove those results for when the user rolls the dice again.
I decided to use divs to separate the rolled dice, the dice the user kept and the menu used for rolling the dice.
My problem is this: I need to display the results of the die rolls in this new div. I have been very, very unsuccessful - mostly because I don't fully understand how appendChild() works even after reading multiple posts on W3schools and other sites.
So here's my code - look specifically in the addImageRolled function - I don't necessarily want it "fixed", I want to know how I can fix it. This is a learning project for me.
<!doctype html>
<html>
<head>
<title>Put your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<script>
// variables
var diceLeft = 6;
// arrays
var rolls = [];
var kept = [];
// functions
// rolls dice
function rollDice() {
for (var i = 0; i < diceLeft; i++) {
rolls[i] = 1 + Math.floor(Math.random() * 6);
};
displayRoll();
};
// creates images for displayRoll function
function addImageRolled(id, src, width, height, hspace) {
var img = document.createElement("img");
img.id = id;
img.src = src;
img.width = width;
img.height = height;
img.hspace = hspace;
img.onmouseup= keepDie();
document.getElementById("Rolled").appendChild(img);
};
// displays images based on rolls
displayRoll() {
switch(roll[0]) {
case 1: addImageRolled(1, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(1, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(1, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(1, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(1, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(1, "dice-6.png", 100, 100, 5);
break;
};
switch(roll[1]) {
case 1: addImageRolled(2, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(2, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(2, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(2, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(2, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(2, "dice-6.png", 100, 100, 5);
break;
};
switch(roll[2]) {
case 1: addImageRolled(3, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(3, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(3, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(3, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(3, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(3, "dice-6.png", 100, 100, 5);
break;
};
switch(roll[3]) {
case 1: addImageRolled(4, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(4, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(4, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(4, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(4, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(4, "dice-6.png", 100, 100, 5);
break;
};
switch(roll[4]) {
case 1: addImageRolled(5, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(5, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(5, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(5, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(5, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(5, "dice-6.png", 100, 100, 5);
break;
};
switch(roll[5]) {
case 1: addImageRolled(6, "dice-1.png", 100, 100, 5);
break;
case 2: addImageRolled(6, "dice-2.png", 100, 100, 5);
break;
case 3: addImageRolled(6, "dice-3.png", 100, 100, 5);
break;
case 4: addImageRolled(6, "dice-4.png", 100, 100, 5);
break;
case 5: addImageRolled(6, "dice-5.png", 100, 100, 5);
break;
case 6: addImageRolled(6, "dice-6.png", 100, 100, 5);
break;
};
};
</script>
<div class="content">
<div class="Menu">
<div class="content">
<p>How to play: Click "Roll!" button to roll the dice. Click on any die to keep it.</p>
<input type = "button" value = "Roll!" onClick = rollDice()>
</div>
</div>
<div id="Rolled" class="Rolled">
<div class="content">
</div>
</div>
<div class="Kept">
<div class="content">
</div>
</div>
</div>
There are several problems with your code as shown, none of which are actually related to the .appendChild() method - which you are using correctly.
Within your addImageRolled() function you have the line:
img.onmouseup= keepDie();
...but the keepDie() function is not defined, and also you should not have the parentheses or it calls the function immediately and assigns the result as the onmouseup handler. You need to actually declare the function and then use it like this:
img.onmouseup = keepDie;
Your displayRoll() function declaration is missing the word function, which gives you a syntax error. And within displayRoll() you reference an array called roll that should be rolls. Also this function can be made much, much shorter:
// displays images based on rolls
function displayRoll() {
for (var i = 0; i < diceLeft; i++) {
addImageRolled(i + 1, "dice-" + rolls[i] + ".png", 100, 100, 5);
}
}
You don't need six separate switch statements that all look the same, you can just use a for loop to process each element of your rolls array. And then for any given element, rolls[i], there is no need to use a switch statement to decide which image to add, because you can just concatenate the value of the rolls[i] element directly into the string that gives the image name.
Here's a demo with those changes incorporated: http://jsfiddle.net/YcwDb/3/ (Doesn't actually have images, but you can see where they would be.)
"I don't necessarily want it "fixed", I want to know how I can fix it. This is a learning project for me."
Well the above should get you going. In general, if you use your browser's dev tools (displayed by pressing F12 in Chrome or IE or ctrl-shift-K in FF) these sorts of errors will be displayed in the console. Sometimes the error messages are a bit cryptic (especially for a beginner), but still they're better than wondering what might be wrong.