hi, totally blind. using the jaws 2026 screen reader. using windows 11 pro. using microsoft edge. now got a issue with the lab. the dom for the generate button is loading properly and confusing the fcc editor. have tried researching, tried different approaches, and then did try to research. and it is not passing, so can any one help me out like maybe ray. so i will paste the html, javascript and the errors list below. tried multiple reset the lesson, multiple refreshes, and then so have tried to get it working. so need some guidance.
thank you.
marvin.
ps: pasting below:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sorting Visualizer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div id="array-container">
<div id="starting-array"></div>
</div>
<div id="btn-container">
<button id="generate-btn" type="button">Generate Array</button>
<button id="sort-btn" type="button">Sort Array</button>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
java script:
// Generate a random integer between 1 and 100 inclusive
function generateElement() {
return Math.floor(Math.random() * 100) + 1;
}
// Generate an array of five random integers
function generateArray() {
const arr = [];
for (let i = 0; i < 5; i++) {
arr.push(generateElement());
}
return arr;
}
// Generate an empty div container
function generateContainer() {
return document.createElement("div");
}
// Fill a container element with span elements showing array values
function fillArrContainer(container, array) {
container.innerHTML = ""; // Clear existing content
array.forEach((num) => {
const span = document.createElement("span");
span.textContent = num;
container.appendChild(span);
});
}
// Check if first number is less than or equal to second
function isOrdered(a, b) {
return a <= b;
}
// Swap elements at index and index+1 if out of order
function swapElements(array, index) {
if (!isOrdered(array[index], array[index + 1])) {
const temp = array[index];
array[index] = array[index + 1];
array[index + 1] = temp;
}
}
// Highlight two elements in a container at index and index+1
function highlightCurrentEls(container, index) {
const children = container.children;
for (let i = 0; i < children.length; i++) {
children[i].style.border = "none"; // Remove previous highlights
}
if (children[index] && children[index + 1]) {
children[index].style.border = "2px dashed red";
children[index + 1].style.border = "2px dashed red";
}
}
// Generate button behavior
document.getElementById("generate-btn").addEventListener("click", () => {
const startingArrayEl = document.getElementById("starting-array");
const arrayContainer = document.getElementById("array-container");
// Remove all other divs except starting-array
Array.from(arrayContainer.children).forEach((child) => {
if (child.id !== "starting-array") arrayContainer.removeChild(child);
});
const arr = generateArray();
fillArrContainer(startingArrayEl, arr);
// Highlight first two numbers
highlightCurrentEls(startingArrayEl, 0);
});
// Sort button behavior
document.getElementById("sort-btn").addEventListener("click", () => {
const startingArrayEl = document.getElementById("starting-array");
const arrayContainer = document.getElementById("array-container");
const originalArray = Array.from(startingArrayEl.children).map(
(span) => Number(span.textContent)
);
let steps = [];
let arr = [...originalArray];
steps.push([...arr]);
// Bubble sort logic with steps
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
swapElements(arr, j);
steps.push([...arr]);
}
}
// Clear any previous steps except starting-array
Array.from(arrayContainer.children).forEach((child) => {
if (child.id !== "starting-array") arrayContainer.removeChild(child);
});
// Create divs for each step
steps.forEach((step) => {
const div = generateContainer();
fillArrContainer(div, step);
arrayContainer.appendChild(div);
});
// Highlight first two elements in starting-array
highlightCurrentEls(startingArrayEl, 0);
});
error list:
-
Passed:1. You should have a function named
generateElement. -
Passed:2. Your
generateElementfunction should return a random integer between1and100inclusive. -
Passed:3. You should have a function named
generateArray. -
Passed:4. Your
generateArrayfunction should make use of thegenerateElementfunction. -
Passed:5. Your
generateArrayfunction should return an array containing five random integers between1and100. -
Passed:6. You should have a function named
generateContainer. -
Passed:7. Your
generateContainerfunction should return an emptydivelement. -
Passed:8. You should have a function named
fillArrContainer. -
Passed:9. Your
fillArrContainer()should take an element as its first parameter and an array of integers as its second parameter, then populate the element with fivespanelements, with eachspanshowing one of the integers from the array. -
Passed:10. You should have a function named
isOrdered. -
Passed:11. Your
isOrderedfunction should take two integers and should return a boolean indicating if the first integer is less than or equal to the second. -
Passed:12. You should have a function named
swapElements. -
Passed:13. Your
swapElementsfunction take an array of integers and a numeric index as arguments. It should modify the array passed in place by swapping the element at the given index and the following element if the first element is greater than the second. -
Passed:14. You should have a function named
highlightCurrentEls. -
Passed:15. Your
highlightCurrentElsfunction should give the descendants of the specified element, located at the given index and the next index, a border that isdashed,red, and set to a width of your choice. -
Passed:16. When you click
#generate-btnyou should fill#starting-arraywith fivespanelements, each with a random number between1and100as its text. -
Passed:17. When
#starting-arrayalready contains a generated array, or#array-containercontains the sorted array, clicking the#generate-btnshould remove other elements in the#array-container, leaving only#starting-arraywith newly generated numbers. -
Failed:18. After you click
#sort-btn,#array-containershould contain as manydivelements as the steps required by the Bubble Sort algorithm to sort the starting array, including thedivrepresenting the starting array and adivrepresenting the sorted array. -
Failed:19. After you click
#sort-btn, eachdivwithin#array-containershould contain fivespan, each with a number as its text, and arranged to represent the steps required by Bubble Sort algorithm to sort the starting array. -
Passed:20. When you click the
#sort-btn, you should make use of thehighlightCurrentElsfunction to highlight the elements being compared in each step. -
Passed:21. After you click
#sort-btn,#starting-arrayshould represent the starting step with the initial array and the first two integers highlighted usinghighlightCurrentEls.
