Tell us what’s happening:
Why is #18 giving me so many problems? I think I did it correctly.
18. After you click #sort-btn, #array-container should contain as many div elements as the steps required by the Bubble Sort algorithm to sort the starting array, including the div representing the starting array and a div representing the sorted array.
Your code so far
// Function 1–2: generateElement
function generateElement() {
return Math.floor(Math.random() * 100) + 1;
}
// Function 3–5: generateArray
function generateArray() {
const arr = [];
for (let i = 0; i < 5; i++) {
arr.push(generateElement());
}
return arr;
}
// Function 6–7: generateContainer
function generateContainer() {
return document.createElement("div");
}
// Function 8–9: fillArrContainer
function fillArrContainer(container, array) {
container.innerHTML = "";
array.forEach(num => {
const span = document.createElement("span");
span.textContent = num;
container.appendChild(span);
});
}
// Function 10–11: isOrdered
function isOrdered(a, b) {
return a <= b;
}
// Function 12–13: swapElements
function swapElements(arr, index) {
if (arr[index] > arr[index + 1]) {
const temp = arr[index];
arr[index] = arr[index + 1];
arr[index + 1] = temp;
}
}
// Function 14–15: highlightCurrentEls
function highlightCurrentEls(container, index) {
const spans = container.children;
if (spans[index]) spans[index].style.border = "2px dashed red";
if (spans[index + 1]) spans[index + 1].style.border = "2px dashed red";
}
// Step 16–17: Generate Button Logic
const generateBtn = document.getElementById("generate-btn");
const arrayContainer = document.getElementById("array-container");
generateBtn.addEventListener("click", () => {
// Clear the container
arrayContainer.innerHTML = "";
// Recreate starting-array div
const startingDiv = document.createElement("div");
startingDiv.id = "starting-array";
arrayContainer.appendChild(startingDiv);
// Generate and display array
const arr = generateArray();
fillArrContainer(startingDiv, arr);
});
// Step 18–21: Sort Button Logic
const sortBtn = document.getElementById("sort-btn");
sortBtn.addEventListener("click", () => {
const startingDiv = document.getElementById("starting-array");
const originalArray = Array.from(startingDiv.children).map(span => parseInt(span.textContent));
const steps = [];
let tempArray = [...originalArray];
steps.push([...tempArray]); // Initial array
for (let i = 0; i < tempArray.length; i++) {
for (let j = 0; j < tempArray.length - i - 1; j++) {
const currentStep = [...tempArray];
// Swap if out of order
if (!isOrdered(currentStep[j], currentStep[j + 1])) {
swapElements(currentStep, j);
tempArray = [...currentStep]; // Update array for next pass
}
steps.push([...tempArray]);
}
}
// Clear and render all steps
arrayContainer.innerHTML = "";
steps.forEach((step, index) => {
const stepDiv = generateContainer();
if (index === 0) stepDiv.id = "starting-array";
fillArrContainer(stepDiv, step);
arrayContainer.appendChild(stepDiv);
// Apply highlights only to first step
if (index === 0) {
highlightCurrentEls(stepDiv, 0);
}
});
});
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 Edg/138.0.0.0
Challenge Information:
Build a Sorting Visualizer - Build a Sorting Visualizer