基数排序中可视化第二次迭代的问题

Question

I'm creating a Sorting Visualizer Project. Currently I'm working with a radix sort algorithm. I limited the height of my boxes (sorting items to help visualization) to a three-digit number. It means there are three iterations in radix sort (firstly we sort units place, then tens and hundreds). The problem arises when it comes to the second iteration. I console log the digit of the item in the current sorted array, and it matches its height, but the color may be completely different and have no idea why this is happening. Here is the code:

let sortingContainer = document.getElementById('sortingContainer')

const getDigit = (num, idx) => {
// Convert a number to string to know its length
let strNum = String(parseFloat(num.style.height))

let end = strNum.length - 1
let digit = strNum[end - idx]

if (digit === undefined) return '0'
return digit
}

const getDigitsNumber = (arr) => {
let largest = '0'

arr.forEach((num) => {
  let strNum = String(parseFloat(num.style.height))

  if (strNum.length > largest.length) {
    largest = strNum
  }
})

return largest.length
}

const changeBgColor = (item, digit) => {
  switch (digit) {
  case '0':
    item.style.background = 'crimson'
    break
  case '1':
    item.style.background = 'orange'
    break
  case '2':
    item.style.background = 'yellow'
    break
  case '3':
    item.style.background = 'green'
    break
  case '4':
    item.style.background = 'blue'
    break
  case '5':
    item.style.background = 'indigo'
    break
  case '6':
    item.style.background = 'brown'
    break
  case '7':
    item.style.background = 'turqoise'
    break
  case '8':
    item.style.background = 'gray'
    break
  case '9':
    item.style.background = 'black'
    break
  default:
    break
 }
}

const radixSort = async (arr) => {
  let maxDigits = getDigitsNumber(arr)

  for (let i = 0; i < maxDigits; i++) {
    let buckets = Array.from({ length: 10 }, () => [])
    for (let j = 0; j < arr.length; j++) {
      let digit = getDigit(arr[j], i)
      if (digit !== undefined) {
        buckets[digit].push(arr[j])
      }
    }

  arr = buckets.flat()

  // Update sorting container to change height of the items
  await new Promise((resolve) => {
    setTimeout(() => {
      arr.forEach((item) => {
        // Categorize and change background color of the item based on its current digit
        let digit = getDigit(item, i)
        changeBgColor(item, digit)
        sortingContainer.appendChild(item)
      })

      resolve()
    }, 3000)
  })
}

// Once array is sorted (end of external for loop) change color of the items
await new Promise((resolve) => {
  setTimeout(() => {
    arr.forEach((item) => (item.style.background = 'limegreen'))
    resolve()
  }, 2000)
})

return arr
}

export default radixSort

Arr array is padded from main file (it's a reference to items inside sorting container).

Here is visualization. First iteration is good

Then second is broken(blue, purple and green)

Interestingly, last iteration is correct (red items has the height < 100, orange items 100 < 200 and so on)

Answer 1

The problem was the color name. Instead of 'turqoise' it should've been 'turquoise'.