设置一个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>