well... for begining, i m building some dumb and easy projects because i'm starting learning the world of front end development. One of those you can find in internet was this Color picker idea. Some page where with a button you can generate a random color. all random, no connections between the colors o something else.

(i'm not a native english speaker so sorry if i write something and you dont get it right)

Here's the link to the repository

so...

I build a function that makes a random HSL color randomizing the values and then building a string and puting that in the css

function getRandomHsl(){
let hueValue = 0;
hueValue = Math.floor(
    Math.random() * (360 + 1)
)

let satValue = 0;
satValue = Math.floor(
    Math.random() * (100 + 1)
)

let lightValue = 0;
lightValue = Math.floor(
    Math.random() * (100 + 1)
)

return 'hsl(' + hueValue + ', ' + satValue + '%, ' + lightValue + '%)';}

if you can give me your opinion on that function and tell me if you would have done it inanother way.

so... i wanted to find the way to if the Lightness would have a low value the color of the font change it to some white or something like that. And this is what i figured out. (the first part of the code is the button changing the value of the background color of the main div. This works well. The problem comes after).

hslBtn.addEventListener('click', () => {
 let hslStringComplete = getRandomHsl();
 colorShowcase.textContent = hslStringComplete;
 document.getElementById('color-container').style.backgroundColor = hslStringComplete;

/*================================= change the color font od the text when its to dark */

let hslLightValue = hslStringComplete;
let lightValue = hslLightValue.toString().substr(13,3).replace(/\D/g,'')
console.log(hslLightValue.substr(13,3).replace(/\D/g,''));
    
if(lightValue < 40){
    innerHTML('input').style.color = "white";
}})

i have really strougle it out coming up with this idea so i want some opinion on how could i have done in other way.

PD: `if(lightValue < 40){ innerHTML('input').style.color = "white";}

this is hte HTML: <input class="background-container"><h3 class="forWhiteColor">Background Color : <span class="color-showcase">#messi</span></h3></input>

this part get me an error and the html doesn get changes. Here's the error.

console error

thanks in advance.