如何实现点击时从指定色值中随机切换元素边框颜色

现有代码问题 #

• 未将可选颜色存入数组统一管理
• 字符串引号未正确闭合，存在多余空格
• 缺少随机取值逻辑，函数未正确闭合

最终实现代码 #

版本1：每次点击完全随机取色 #

// 预定义可选颜色列表
const colorList = ["red", "hotpink", "greenyellow", "tomato", "lightcoral", "lightblue"]

function changeColor() {
  // 生成符合数组下标范围的随机整数
  const randomIndex = Math.floor(Math.random() * colorList.length)
  document.getElementById("box").style.borderColor = colorList[randomIndex]
}

版本2：先随机排序再依次切换（用完一轮后重新打乱排序） #

如果需要避免连续出现相同颜色，可选用该版本：

const colorList = ["red", "hotpink", "greenyellow", "tomato", "lightcoral", "lightblue"]
let shuffledColors = []
let currentIndex = 0

// Fisher-Yates 数组打乱算法
function shuffleArray(arr) {
  const newArr = [...arr]
  for (let i = newArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[j]] = [newArr[j], newArr[i]]
  }
  return newArr
}

function changeColor() {
  // 取完所有颜色后重新打乱排序
  if (!shuffledColors.length || currentIndex >= shuffledColors.length) {
    shuffledColors = shuffleArray(colorList)
    currentIndex = 0
  }
  document.getElementById("box").style.borderColor = shuffledColors[currentIndex]
  currentIndex++
}

内容的提问来源于stack exchange，提问作者Πετρος Λογγρος