I managed to resolve the issue by converting the Nodelist array obtained from .querySelectorAll into a regular array using .Arrayfrom(). With some research, I was able to easily figure out this step. Next, I had to determine how to update the array in each iteration, which turned out to be as straightforward as shifting one index to another.
The intriguing aspect of the solution was updating the Nodelist itself to ensure that all my CSS code remained functional (as it is a sorting visualizer). Surprisingly, the answer was quite simple. Even after transforming the Nodelist array into a standard array, I could still apply styles to it without altering the Nodelist array. This allowed me to maintain a separate array within the function for manipulation.
PS. The algorithm encountered significant issues in the previous snippet due to comparing two strings in the if statement (value1 and value2), resulting in errors. This was quickly resolved by wrapping my innerHTML code with the Number() function.
Selection
async function selectionSort() {
let blocks = document.querySelectorAll('.block');
let convertedBlocks = Array.from(blocks);
let len = convertedBlocks.length;
for (let i = 0; i < len; i++) {
let min = i;
for (let j = i + 1; j < len; j++) {
convertedBlocks[j].style.backgroundColor = 'red';
convertedBlocks[min].style.backgroundColor = 'green';
convertedBlocks[i].style.backgroundColor = 'orange';
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, frame_speed)
);
if (
Number(convertedBlocks[min].childNodes[0].innerHTML) >
Number(convertedBlocks[j].childNodes[0].innerHTML)
) {
convertedBlocks[min].style.backgroundColor = '#58B7FF';
min = j;
}
convertedBlocks[j].style.backgroundColor = '#58B7FF';
}
if (min !== i) {
let tmp = convertedBlocks[i];
convertedBlocks[i] = convertedBlocks[min];
convertedBlocks[min] = tmp;
await swap(convertedBlocks[i], convertedBlocks[min]);
}
convertedBlocks[min].style.backgroundColor = '#58B7FF';
convertedBlocks[i].style.backgroundColor = '#58B7FF';
}
}