設置一個div來顯示一個數組

Question

我想設置一個數組作爲由腳本創建的div的innerHTML，以便在排序函數的任何一步顯示數組。我得到

無法設置屬性'innerHTML'爲null。

arr是數組的名稱。

這裏是我使用的代碼：

function bubbleSort(arr){ 
    var swapped, 
     container = document.getElementById("container"), 
     o = 0; 
    console.log("entered bubbleSort"); 
    do { 
     swapped = false; 
     for (var i=0; i < arr.length-1; i++) { 
      console.log(arr); 
      o + 1; 
      container.innerHTML += '<div id = "div"+ o></div>'; 
      document.getElementById("div" + o).innerHTML = arr[i]; 
      if (arr[i] > arr[i+1]) { 
       var temp = arr[i]; 
       arr[i] = arr[i+1]; 
       arr[i+1] = temp; 
       swapped = true; 
      } 
     } 
    } while (swapped) 
} 

Answer 1

創建新的元素是這樣的：

var newDiv = document.createElement("div"); 
newDiv.id = "div"+o; 
container.appendChild(newDiv); 
document.getElementById("div" + o).innerHTML = arr[i]; 

編輯： 實際上，你剛剛一個錯字。請參閱RobG評論。此方法更高效，並且不會刪除先前綁定的事件。

一個工作的jsfiddle：link

Answer 2

有你的代碼的兩個問題。以下行：

o + 1; 

什麼都不做。我想你的意思遞增o，所以使用：

++o; 

此外，還有以下行一個錯字：

container.innerHTML += '<div id = "div"+ o></div>'; 
             ^^^^^ 

你應該使用什麼樣的是：

container.innerHTML += '<div id="div' + o + '"></div>'; 
            ^^^^^^^ 

您可能會發現使用DOM方法更方便，但這裏是您的原始函數，修正了錯字：

function bubbleSort(arr) { 
 
    var swapped, 
 
    container = document.getElementById("container"), 
 
    o = 0; 
 
    console.log("entered bubbleSort"); 
 
    do { 
 
    swapped = false; 
 
    for (var i = 0; i < arr.length - 1; i++) { 
 
     console.log(arr); 
 
     ++o; 
 
     container.innerHTML += '<div id="div' + o + '"></div>'; 
 

 
     document.getElementById("div" + o).innerHTML = arr[i]; 
 

 
     if (arr[i] > arr[i + 1]) { 
 
     var temp = arr[i]; 
 
     arr[i] = arr[i + 1]; 
 
     arr[i + 1] = temp; 
 
     swapped = true; 
 
     } 
 
    } 
 
    } while (swapped) 
 
} 
 

 
bubbleSort([2,1,3]);

<div id="container"></div>