JS从渐变数组随机取值仅返回索引，如何获取对应颜色字符串值？

问题原因 #

你代码中通过Math.floor(Math.random() * colors.length)生成的是数组的随机整数索引，而非索引对应的颜色值，直接使用这个索引自然只会输出数字。

修复方法 #

用生成的随机索引访问colors数组，拿到对应位置的颜色字符串即可，修改后的完整代码如下：

const colorBtn = document.querySelector("button")    

function changeColor(){    
    let colors = [
        "radial-gradient(#DE0404, #EBDFDF)",
        "radial-gradient(#CDD663, #050504)",
        "linear-gradient(#B4C2B2, #092B04)",
        "radial-gradient(#8FA19E, #0A917B)",
        "linear-gradient(#161617, #2A07DB)",
        "radial-gradient(#524D51, #FF00CC)",
    ]

    const randomIndex = Math.floor(Math.random() * colors.length)
    // 用随机索引读取数组对应位置的颜色值
    const randomColor = colors[randomIndex]
    document.querySelector("body").style.background = randomColor
    console.log(randomColor)

}

colorBtn.addEventListener('click', changeColor)    

这里把存储索引的变量重命名为randomIndex是为了更语义化，避免和实际的颜色值变量混淆，你也可以根据自己的习惯调整变量命名。

内容的提问来源于stack exchange，提问作者Connor Boulton