-1

So I am trying a simple function within HTML that will change the styling to a random color from an array. I've successfully randomized it, but it only returns the index value and not the index string value. The console thinks I want 3 rather than "radial-gradient(#8FA19E, #0A917B)". How can I change it to the right value?

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 randomColor = Math.floor(Math.random() * colors.length)
    document.querySelector("body").style.background = `${randomColor}`
    console.log(`${randomColor}`)

}

colorBtn.addEventListener('click', changeColor)    

1 Answers1

0
const randomColor = Math.floor(Math.random() * colors.length)
document.querySelector("body").style.background = `${colors[randomColor]}`