mercredi 21 juin 2023

When random number hits certain value h1 or button should change color

I made a random color generator and while it generates the random colors and displays the numbers, when it gets very dark on the page I wanted the h1 to become white and the button to become black if it became very bright.

const button = document.getElementById('button');
const h1 = document.getElementById('h1');

button.addEventListener('click', function (){
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    const newColor = `rgb(${r}, ${g}, ${b})`;
    document.body.style.backgroundColor = newColor;
    h1.innerText = newColor;
});

button.addEventListener('click', function (){
    if(parseFloat(r >= 150 || g >= 150 || b >= 150)) {
        document.button.style.backgroundColor = '#000';
        document.button.style.color = '#fff';
    } else if(parseFloat(r >= 60 || g >= 60 || b >= 60)) {
        document.h1.style.color = '#fff';
    }
});

I think there is an issue with my parseFloat but I am unsure. I think the issue is that the number becomes a string and isn't converted back properly?

Right now my code just does not respond to the second portion where I ask the 'if' statements.




Aucun commentaire:

Enregistrer un commentaire