1
我刚刚完成在JavaScript中codeacademy当然这样原谅我总知识的缺乏。使用appendChild（）动态图像添加到特定的div
我试图创建一个使用JavaScript和HTML经典的酒吧游戏1-4-24（也叫过了午夜或午夜后）。 （这是一个video，它为那些不知道它是什么的人展示了游戏
到目前为止，我创建了一个函数，它将掷骰子并将其存储在一个数组中。代码我能够将这些结果以图像形式附加到页面主体，但我需要能够删除用户再次掷骰子时的结果
我决定使用div分离的滚动骰子，骰子用户保留和使用掷骰子菜单
我的问题是这样的：我需要在这个新的div显示模辊的成绩我已经非常，非常不成功 - 米因为我并不完全理解appendChild（）在阅读W3school和其他网站上的多篇文章后是如何工作的。
因此，这里是我的代码 - 在addImageRolled功能具体看 - 我并不希望它“固定”，我想知道我怎么能解决这个问题。这对我来说是一个学习项目。
<!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>
当我尝试创建一个小提琴时，它正在讨论一个语法错误。你有没有看到你的控制台？ – karthikr