Estoy creando un visualizador de clasificación de burbujas usando html, css y javascript. A continuación se muestra el código 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; }) }Crea números aleatorios del 1 al 100, crea etiquetas div respectivas para representar los números y luego los ordena usando la ordenación de burbujas. Pero no sé por qué no obtengo el resultado ordenado. También muestra el siguiente error:
Uncaught TypeError: Cannot read properties of undefined (reading 'style')Este error ocurre en esta línea:
childElements[j].style.backgroundColor = "red";Pero cuando consola. log (childElements), muestra con éxito las etiquetas div creadas para representar los números.
Por favor, ¿alguien puede ayudarme? Gracias por adelantado.
Cuando i es 0 y j es 9, entonces j+1 se refiere a childElements[10] que no está definido.
Intenta cambiar el segundo bucle for a
for (let j = 0; j < numbers.length - i - 1; j++)
El problema está aquí, 'j + 1' está fuera de los límites de la matriz y no estará undefined
childElements[j + 1].style.backgroundColor = "red";