Question

我刚刚完成了关于javascript的codeacademy课程，所以请原谅我完全缺乏知识。

我正在尝试使用javascript和html创建1-4-24（也称为午夜或午夜之后）的经典酒吧游戏。（这是一个video，为那些不知道它是什么的人展示游戏。

到目前为止，我已经创建了一个滚动骰子并将它们存储在数组中的函数。在此代码的先前版本中，我能够将图像形式的结果（img）附加到页面正文。但是，我需要能够在用户再次掷骰子时删除这些结果。

我决定使用div来分割掷骰子，用户保留的骰子以及用于掷骰子的菜单。

我的问题是：我需要在这个新div中显示掷骰子的结果。我一直非常非常不成功 - 主要是因为即使在W3schools和其他网站上阅读了多篇帖子之后我还没有完全理解appendChild（）是如何工作的。

所以这是我的代码 - 具体看看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>

Answer 1

如图所示，您的代码存在一些问题，其中没有一个问题与您正确使用的.appendChild()方法有关。

在addImageRolled()函数中，您有以下行：

img.onmouseup= keepDie();

...但是keepDie()函数没有定义，你也不应该有括号或它立即调用函数并将结果赋值为onmouseup处理程序。你需要实际声明该函数，然后像这样使用它：

img.onmouseup = keepDie;

您的displayRoll()函数声明缺少单词function，这会给您一个语法错误。在displayRoll()中，您引用了一个名为roll的数组，该数组应为rolls。此功能也可以做得更多，很多更短：

// displays images based on rolls
function displayRoll() {
    for (var i = 0; i < diceLeft; i++) {
        addImageRolled(i + 1, "dice-" + rolls[i] + ".png", 100, 100, 5);
    }
}

您不需要六个单独的switch语句，它们看起来都一样，您只需使用for循环来处理rolls数组的每个元素。然后对于任何给定元素rolls[i]，不需要使用switch语句来决定要添加哪个图像，因为您可以将rolls[i]元素的值直接连接到给出的字符串中图像名称。

以下是包含这些更改的演示：http://jsfiddle.net/YcwDb/3/（实际上没有图片，但您可以看到它们的位置。）

“我不一定要”固定“，我想知道如何修复它。这对我来说是一个学习项目。”

以上应该让你去。通常，如果您使用浏览器的开发工具（通过在Chrome或IE中按F12或在FF中按ctrl-shift-K显示），这些类型的错误将显示在控制台中。有时错误信息有点神秘（特别是初学者），但他们仍然比想知道可能出错的更好。

Answer 2

我建议使用Chrome开发者工具（Chrome中的F12）来调试javascript。进入“来源”，按左上角的箭头，找到该文件，然后按“滚动”按钮。

我做的第一件事是在“displayRoll（）”之前添加“function”关键字，因为这会抛出一个SyntaxError。

它显示的一些事情：

“未捕获的ReferenceError：未定义roll。”

将所有“roll”实例更改为“roll”后，因为您定义的数组是“roll”：

“未定义的ReferenceError keepDie（）未定义。”

删除引用“keepDie（）”的行后，因为我看不到它在做什么，滚动后我会在屏幕上显示六个图像。

我还建议您为“displayRoll（）”函数使用某种循环，以使代码更清晰，并允许它更容易更改您想要显示的骰子数量：

function displayRoll() {
    for (var i = 0; i < 6; i++)
    {
        switch(rolls[i]) {
            case 1: addImageRolled(i+1, "dice-1.png", 100, 100, 5);
            break;
            case 2: addImageRolled(i+1, "dice-2.png", 100, 100, 5);
            break;
            case 3: addImageRolled(i+1, "dice-3.png", 100, 100, 5);
            break;
            case 4: addImageRolled(i+1, "dice-4.png", 100, 100, 5);
            break;
            case 5: addImageRolled(i+1, "dice-5.png", 100, 100, 5);
            break;
            case 6: addImageRolled(i+1, "dice-6.png", 100, 100, 5);
            break;
            };
    }
};

我不相信你对“appendChild”有任何问题，但我是一名C＃开发人员，我的javascript知识非常少。

Answer 3

 1. onclick method 

    <input type = "button" value = "Roll!" onClick = rollDice()>

should be with wrapepd in quotes

    <input type = "button" value = "Roll!" onClick = "rollDice()">

 2. Your array is named rolls`var rolls = [];`

    but in switch you got  roll `switch(roll[0])`

appendChild（）将图像动态添加到特定div

3 个答案: