Tell us what’s happening:
I think there is a bug, I am not sure how can I pass the step 18. Any idea?
Your code so far
let currentArray = [];
function generateElement() {
return Math.floor(Math.random() * 100) + 1;
}
function generateArray() {
const arr = [];
for (let i = 0; i < 5; i++) {
arr.push(generateElement());
}
return arr;
}
function generateContainer() {
return document.createElement("div");
}
function fillArrContainer(container, arr) {
container.innerHTML = ""; // Clear existing content
arr.forEach((num) => {
const span = document.createElement("span");
span.textContent = num;
container.appendChild(span);
});
}
function isOrdered(a, b) {
return a <= b;
}
function swapElements(arr, index) {
if (!isOrdered(arr[index], arr[index + 1])) {
const temp = arr[index];
arr[index] = arr[index + 1];
arr[index + 1] = temp;
}
}
function highlightCurrentEls(container, index) {
const children = container.children;
if (index < children.length) {
children[index].style.border = "2px dashed red";
}
if (index + 1 < children.length) {
children[index + 1].style.border = "2px dashed red";
}
}
document.getElementById("generate-btn").addEventListener("click", function () {
const arrayContainer = document.getElementById("array-container");
arrayContainer.innerHTML = "";
const startingArrayDiv = document.createElement("div");
startingArrayDiv.id = "starting-array";
arrayContainer.appendChild(startingArrayDiv);
currentArray = generateArray();
fillArrContainer(startingArrayDiv, currentArray);
});
document.getElementById("sort-btn").addEventListener("click", function () {
if (currentArray.length === 0) return;
const arrayContainer = document.getElementById("array-container");
const startingArrayDiv = document.getElementById("starting-array");
fillArrContainer(startingArrayDiv, currentArray);
highlightCurrentEls(startingArrayDiv, 0);
let arr = currentArray.slice();
const n = arr.length;
let comparisonCount = 0; // total comparisons performed
for (let i = 0; i < n - 1; i++) {
for (let j = 0; j < n - i - 1; j++) {
comparisonCount++;
if (comparisonCount === 1) {
if (!isOrdered(arr[j], arr[j + 1])) {
swapElements(arr, j);
}
} else {
const stepContainer = generateContainer();
fillArrContainer(stepContainer, arr);
highlightCurrentEls(stepContainer, j);
arrayContainer.appendChild(stepContainer);
if (!isOrdered(arr[j], arr[j + 1])) {
swapElements(arr, j);
}
}
}
}
const finalContainer = generateContainer();
fillArrContainer(finalContainer, arr);
highlightCurrentEls(finalContainer, 0);
arrayContainer.appendChild(finalContainer);
});
- without sharing this “exercise url” we cant be certain about this error that you are referring to
its always useful to share exercise url along with your attempted code snippet with your queries…
happy coding 
Tell us what’s happening:
I cant pass test18. I have no idea and dont waste more time on it as long as my solution is perfect. any tip guys?
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Challenge Information:
Build a Sorting Visualizer - Build a Sorting Visualizer
let currentArray = [];
function generateElement() {
return Math.floor(Math.random() * 100) + 1;
}
function generateArray() {
const arr = [];
for (let i = 0; i < 5; i++) {
arr.push(generateElement());
}
return arr;
}
function generateContainer() {
return document.createElement("div");
}
function fillArrContainer(container, arr) {
container.innerHTML = ""; // Clear existing content
arr.forEach((num) => {
const span = document.createElement("span");
span.textContent = num;
container.appendChild(span);
});
}
function isOrdered(a, b) {
return a <= b;
}
function swapElements(arr, index) {
if (!isOrdered(arr[index], arr[index + 1])) {
const temp = arr[index];
arr[index] = arr[index + 1];
arr[index + 1] = temp;
}
}
function highlightCurrentEls(container, index) {
const children = container.children;
if (index < children.length) {
children[index].style.border = "2px dashed red";
}
if (index + 1 < children.length) {
children[index + 1].style.border = "2px dashed red";
}
}
// aaaaaaaaaaaaaaaaaa
document.getElementById("generate-btn").addEventListener("click", function () {
const arrayContainer = document.getElementById("array-container");
arrayContainer.innerHTML = "";
const startingArrayDiv = document.createElement("div");
startingArrayDiv.id = "starting-array";
arrayContainer.appendChild(startingArrayDiv);
currentArray = generateArray();
fillArrContainer(startingArrayDiv, currentArray);
});
document.getElementById("sort-btn").addEventListener("click", function () {
if (currentArray.length === 0) return;
const arrayContainer = document.getElementById("array-container");
const startingArrayDiv = document.getElementById("starting-array");
fillArrContainer(startingArrayDiv, currentArray);
highlightCurrentEls(startingArrayDiv, 0);
let arr = currentArray.slice();
const n = arr.length;
let comparisonCount = 0; // total comparisons performed
for (let i = 0; i < n - 1; i++) {
for (let j = 0; j < n - i - 1; j++) {
comparisonCount++;
if (comparisonCount === 1) {
if (!isOrdered(arr[j], arr[j + 1])) {
swapElements(arr, j);
}
} else {
const stepContainer = generateContainer();
fillArrContainer(stepContainer, arr);
highlightCurrentEls(stepContainer, j);
arrayContainer.appendChild(stepContainer);
if (!isOrdered(arr[j], arr[j + 1])) {
swapElements(arr, j);
}
}
}
}
const finalContainer = generateContainer();
// arrayContainer.removeChild(arrayContainer.children[1]);
fillArrContainer(finalContainer, arr);
highlightCurrentEls(finalContainer, 0);
arrayContainer.appendChild(finalContainer);
if (
arrayContainer.children[0].innerText == arrayContainer.children[1].innerText
) {
arrayContainer.removeChild(arrayContainer.children[1]);
}
if (
arrayContainer.children[0].innerText == arrayContainer.children[1].innerText
) {
arrayContainer.removeChild(arrayContainer.children[1]);
}
while (
arrayContainer.children[arrayContainer.children.length - 2].innerText ==
arrayContainer.children[arrayContainer.children.length - 1].innerText
) {
arrayContainer.removeChild(
arrayContainer.children[arrayContainer.children.length - 2]
);
}
});
// # const arrayContainer = document.getElementById("array-container");
This is a screenshot of output from the example project:
Try setting currentArray within the #generate-btn listener to the same starting array in the screenshot and look to see where your code does not match. You can troubleshoot by using console.log() statements throughout your code to see what’s going on.
When I did a quick test of your code, I noticed missing divs after the first iteration. Also, there is no final sorted div.
