顯示用戶輸入的圖像數量？ Javascript

我想讓用戶收到警報並輸入一個數字。將出現相應數量的圖像。我有這樣的代碼：「的document.getElementById（ 'burgerImages'）的innerHTML = X;」顯示用戶輸入的圖像數量？ Javascript

<!DOCTYPE hmtl> 
<html> 
    <head> 
    <script> 
//creating my function 
    function howMany(){ 
     var numBurgers = parseInt(prompt('How many burgers do you want?', "3")); 
     var x = ""; 

     for(var count = 0; count < numBurgers; count++;){ 
      x += "<img src=\"burger.jpg\" />"; 
     } 

     document.getElementById('burgerImages').innerHTML = x; 
    } 
</script> 
</head> 
<body onload="howMany();"> 
    <div id="burgerImages"></div> 
</body> 
</html>

有人建議我替換 with「document.getElementById（'burgerImages'）。appendChild（x）。」但這不起作用。任何想法？

來源

2017-04-10 Sebastien Bolh

對於'appendChild'，傳遞的參數應該是由'document.createElement'創建的實際DOM元素，而不是字符串。 –

基本上，因爲appendChild期望參數是一個Node Element不是一個字符串。

您需要創建不同的節點，然後追加這些節點：

var fragmentCollection = document.createDocumentFragment(); 
for (var i = 0; i < numBurgers; i++) {  
    var img = document.createElement("img"); 
    img.setAttribute('src', 'burger.jpg'); 
    fragmentCollection.appendChild(img); 
} 
var burgerContainer = document.getElementById('burgerImages'); 
burgerContainer.appendChild(fragmentCollection);

參考文獻：

來源

2017-04-10 00:56:25

顯示用戶輸入的圖像數量？ Javascript

回答

相關問題