冒泡排序可视化器未显示预期结果

Question

我正在使用html, css和javascript创建一个气泡排序可视化器。以下是javascript代码:

const numbers = [];
let targetParent = document.querySelector("#bars")
function swap(el1, el2) {
const style1 = window.getComputedStyle(el1);
const style2 = window.getComputedStyle(el2);
const transform1 = style1.getPropertyValue("height");
const transform2 = style2.getPropertyValue("height");
el1.style.height = transform2;
el2.style.height = transform1;
}

function bubbleSort() {
let childElements =targetParent.children;
console.log(childElements);
for (let i = 0; i < numbers.length; i++) {
for (let j = 0; j < numbers.length - i; j++)
{
childElements[j].style.backgroundColor = "red";
childElements[j + 1].style.backgroundColor = "red";
if (numbers[j] > numbers[j + 1]) {
let temp=numbers[j];
numbers[j]=numbers[j+1];
numbers[j+1]=temp;
swap(childElements[j], childElements[j + 1]);
}
}
childElements[n - i].style.backgroundColor = "green";
}
}
function createArray() {
numbers.splice(0, numbers.length);
targetParent.innerHTML = "";
while (numbers.length < 100) {
let r = Math.floor(Math.random() * 100);
numbers.push(r);
}
console.log(numbers);
let element = document.createElement("div");
element.classList.add("bar");
element.style.width = "10px";
element.style.backgroundColor = "yellow";
element.style.border = "1px solid";
for (let i = 0; i < 100; i++) {
element.style.height = `${numbers[i] * 3}px`;
targetParent.appendChild(element.cloneNode(true));
}
let buttons = document.getElementsByClassName("sortbtn");
Array.from(buttons).forEach((element) => {
element.disabled = false;
})
}

它创建从1到100的随机数，创建相应的div标签来表示这些数字，然后使用冒泡排序对它们进行排序。但是我不知道为什么我没有得到排序的结果。它还显示了以下错误:

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

这个错误发生在这行:

childElements[j].style.backgroundColor = "red";

但是当我执行console.log(childElements)时，它成功地显示了创建的div标签来表示数字。

谁能帮帮我吗?提前谢谢。

Answer 1

这里的问题是，'j + 1'超出了数组的范围，它将是undefined

childElements[j + 1].style.backgroundColor = "red";

Answer 2

当i为0,j为9时，则j+1指未定义的childElements[10]。

尝试将第二个for循环更改为

for (let j = 0; j < numbers.length - i - 1; j++)