使用appendChild（）動態圖像添加到特定的div

我剛剛完成在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>

來源

2013-06-02 Kwestion

當我嘗試創建一個小提琴時，它正在討論一個語法錯誤。你有沒有看到你的控制檯？ – karthikr

有幾個問題，你的代碼所示，其中沒有一個實際上都涉及到.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); 
    } 
}

你並不需要六個獨立的開關語句看起來都一樣，你可以只使用一個for循環來處理您的rolls陣列中的每個元素。然後對於任何給定的元素rolls[i]，不需要使用switch語句來決定添加哪個圖像，因爲您可以直接將rolls[i]元素的值連接到提供圖像名稱的字符串中。

這裏有一個演示具有結合這些變化：http://jsfiddle.net/YcwDb/3/（實際上並沒有圖像，但你可以看到他們將成爲。）

"I don't necessarily want it "fixed", I want to know how I can fix it. This is a learning project for me."

那麼上面應該讓你去。一般來說，如果您使用瀏覽器的開發工具（通過在Chrome或IE中按F12或在FF中按Ctrl-Shift-K顯示），這些錯誤將顯示在控制檯中。有時候錯誤信息有點神祕（特別是對於初學者），但仍然比想知道可能會出錯的問題要好。

來源

2013-06-02 00:48:28 nnnnnn

謝謝你的回答！ – Kwestion

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])`

來源

2013-06-02 00:39:49

感謝您的幫助！ – Kwestion

我reccomend使用Chrome開發者工具（F12鉻）調試的JavaScript。進入「Sources」，按左上角的箭頭，找到文件，然後按Roll按鈕。

我做的第一件事是「displayRoll（）」前添加「功能」關鍵字，因爲這將拋出一個SyntaxError。

幾件事情，它表明：

「未捕獲的ReferenceError：卷沒有定義。」

後改變「滾動」的所有實例爲「輥」，因爲你定義的陣列是「輥」：

「未捕獲的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知識是非常小的。

來源

2013-06-02 00:43:57

謝謝你的回答，非常有幫助！ – Kwestion

使用appendChild（）動態圖像添加到特定的div

回答

相關問題